<template>
  <a-modal
    title="编辑公司案例"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    ok-text="保存"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
        >
          <a-input v-decorator="['companyId']" />
        </a-form-item>
        <a-form-item label="标题名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入标题名称"
            v-decorator="['companyName', {rules: [{required: true, message: '请输入标题名称！'}]}]"
          />
        </a-form-item>
        <a-form-item
          label="描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea :rows="4" :maxLength="30" placeholder="请输入描述" @input="companyDescribeInput" v-decorator="['companyDescribe', {rules: [{required: true, message: '请输入描述！'}]}]">
          </a-textarea>
          <div class="companyDescribeCount">({{ companyDescribe.length }}/30)</div>
        </a-form-item>
        <a-form-item
          :required="true"
          label="关联案例"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            style="width: 100%"
            placeholder="请选择产品"
            v-decorator="['companyAssociatedCase', {rules: [{ required: true, message: '请选择产品！' }]}]"
          >
            <a-select-option
              v-for="(item,index) in actionClassData"
              :key="index"
              :value="item.articleContentId"
            >{{ item.articleContentTitle }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="默认图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadDefaultRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccessDefault"
              v-decorator="[
                'companyDefaultImg',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          label="交互图像"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadExchangeRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccessExchange"
              v-decorator="[
                'companyExchangeImg',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['companySort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="companyIsLine" v-decorator="['companyIsLine',{ initialValue: 1 }]">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'

export default {
  components: { uploadComponent },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      actionClassData: [],
      companyDescribe: '',
      formLoading: false,
      form: this.$form.createForm(this),
      remarkTxt: '请上传320×400规格图像'
    }
  },
  mounted () {
  },
  methods: {
    // 初始化方法
    edit (record) {
      this.visible = true
      this.formLoading = true
      this.getActionClass()
      setTimeout(() => {
        record.companyAssociatedCase = JSON.parse(record.companyAssociatedCase).articleContentId
        this.form.setFieldsValue(
          {
            companyId: record.companyId,
            companyName: record.companyName,
            companyAssociatedCase: record.companyAssociatedCase,
            companyJumpUrl: record.companyJumpUrl,
            companyDefaultImg: record.companyDefaultImg,
            companyExchangeImg: record.companyExchangeImg,
            companyDescribe: record.companyDescribe,
            companyIsLine: record.companyIsLine,
            companySort: record.companySort
          }
        )
        this.$nextTick(() => {
          this.companyDescribeInput()
          this.$refs.upLoadDefaultRef.initData([record.companyDefaultImg])
          this.$refs.upLoadExchangeRef.initData([record.companyExchangeImg])
        })
      }, 100)
    },

    /**
     * 获取选择器下拉框数据
     */
    getActionClass () {
      homeApi.findArticleAll().then((res) => {
        this.formLoading = false
        if (res.status === 200) {
          this.actionClassData = res.data
        } else {
          this.$message.error('获取文章列表数据失败')
        }
      })
    },
    companyDescribeInput () {
      this.$nextTick(() => {
        this.companyDescribe = this.form.getFieldValue('companyDescribe')
      })
    },
    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.companySort = parseInt(values.companySort)
          values.companyJumpUrl = values.companyAssociatedCase
          homeApi.updateCompanyCase(values)
            .then(res => {
              if (res.status === 200) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    uploadSuccessDefault (avg) {
      if (avg.fileList[0]) {
        this.form.resetFields('companyDefaultImg')
        this.form.setFieldsValue({ 'companyDefaultImg': avg.fileList[0].uri })
      }
    },
    uploadSuccessExchange (avg) {
      if (avg.fileList[0]) {
        this.form.resetFields('companyExchangeImg')
        this.form.setFieldsValue({ 'companyExchangeImg': avg.fileList[0].uri })
      }
    },
    checkimageUrl (rule, value, callback) {
      if (value && value.length > 0) {
        callback()
        return
      }
      var text = '请上传图片'
      callback(text)
    },
    checkSortIndex (rule, value, callback) {
      var text = '请输入排序号！'
      if (!value) {
        callback(text)
      } else if (/(^[1-9]\d*$)/.test(value)) {
        callback()
      } else {
        text = '请输入数字'
        callback(text)
      }
    }
  }
}
</script>
<style lang="less">
  .companyDescribeCount{
    position: absolute;
    right: 30px;
    bottom: -10px;
    color: #999;
  }
</style>
