<template>
  <div>
    <el-form size="large" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="status === 'audit' || status === 'taskFormDetail'"
             label-width="150px">
      <el-row  :gutter="0">
        <el-col :span="12">
          <el-form-item label="客户名称" prop="clientId" :rules="[
                {required: true, message:'请输入客户名称', trigger:'blur'},
                {required: true, message:'请输入客户名称', trigger:'change'}
              ]">
            <work-client-select
              size="large"
              :value="inputForm.clientId"
              :disabled="method==='view'"
              @getValue='(clientId,clientName) => {inputForm.clientId=clientId;inputForm.clientName=clientName}'
            >
            </work-client-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同名称" prop="name"
                        :rules="[
                 {required: true, message:'请输入合同名称', trigger:'blur'}
               ]">
            <el-input maxlength="64" v-model="inputForm.name" placeholder="请输入合同名称"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row  :gutter="0">

        <el-col :span="12">
          <el-form-item label="签订日期" prop="contractDate"
               :rules="[
                {required: true, message:'请输入签订日期', trigger:'blur'}
               ]">
            <el-date-picker
              placement="bottom-start"
              value-format="YYYY-MM-DD"
              v-model="inputForm.contractDate"
              style="width: 100%"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同生效日期" prop="effectiveDate">
            <el-date-picker
              placement="bottom-start"
              value-format="YYYY-MM-DD"
              v-model="inputForm.effectiveDate"
              style="width: 100%"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同终止日期" prop="closingDate">
            <el-date-picker
              @change="checkData"
              placement="bottom-start"
              value-format="YYYY-MM-DD"
              v-model="inputForm.closingDate"
              style="width: 100%"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同类型" prop="contractType"
              :rules="[
                {required: true, message:'请选择合同类型', trigger:'blur'}
              ]">
            <el-select v-model="inputForm.contractType" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in $dictUtils.getDictList('contract_type')"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同金额类别" prop="contractAmountType"
               :rules="[
                  {required: true, message:'请选择合同金额类别', trigger:'blur'}
               ]">
            <el-radio-group v-model="inputForm.contractAmountType">
              <el-radio v-for="item in $dictUtils.getDictList('contract_amount_type')" :label="item.value" >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同/预计金额(元)" prop="contractAmount" v-if="inputForm.contractAmountType === '1'"
                        :rules="[
                  {required: true, message:'请输入合同/预计金额(元)', trigger:'blur'}
               ]">
            <el-input maxlength="15" v-model="inputForm.contractAmount" placeholder="请输入合同/预计金额(元)"
                      @keyup.native="inputForm.contractAmount = twoDecimalPlaces(inputForm.contractAmount)"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="对方合同编号" prop="contractOpposite">
            <el-input maxlength="64" v-model="inputForm.contractOpposite" placeholder="请填写对方合同编号"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="收费标准" prop="contractFees">
            <el-checkbox-group v-model="inputForm.contractFees">
              <el-checkbox @change="changeContractFee(item.value,$dictUtils.getDictList('contract_fee_pg'))" v-for="item in $dictUtils.getDictList('contract_fee_pg')" :label="item.value">
                {{item.label}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item prop="contractFee">
            <el-input style="width: 100%" placeholder="请选择收费标准" v-model="inputForm.contractFee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row></el-row>

      <el-form-item label="备注" prop="remarks">
        <el-input v-model="inputForm.remarks"
                  type="textarea"
                  :rows="5"
                  maxlength="500"
                  placeholder="请输入合同备注"
                  show-word-limit>
        </el-input>
      </el-form-item>

      </el-form>
<!--      <el-image-viewer-->
<!--        v-if="showViewer"-->
<!--        :on-close="closeViewer"-->
<!--        :url-list="[url]"-->
<!--        zIndex="9999"/>-->
    <UpLoadComponent ref="uploadComponent"></UpLoadComponent>
  </div>
</template>

<script>
  import UpLoadComponent from '@/views/common/UpLoadComponent'
  import WorkContractService from '@/api/sys/WorkContractService'
  import WorkClientService from '@/api/sys/WorkClientService'
  import WorkClientSelect from '@/components/workClientInfoSelect'
  import OSSSerive, {
    httpRequest,
    toHref,
    openWindowOnUrl,
    handleRemove,
    fileName
  } from '@/api/sys/OSSService'
  import moment from 'moment'
  import { shallowRef } from 'vue'
  // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    data () {
      return {
        visable: false,
        gridData: [],
        radio: 0,
        tableData: [],
        dataList: [],
        dataListNew: [],
        title: '',
        method: '',
        isSubmit: false,
        visible: false,
        loading: false,
        returnForm: {
          clientId: '',
          name: '',
          contractDate: '',
          effectiveDate: '',
          closingDate: '',
          contractType: '',
          contractAmountType: '',
          contractAmount: '',
          contractOpposite: '',
          contractFees: [],
          fees: '',
          contractFee: '',
          describes: '',
          contractSpecial: '',
          remarks: '',
          clientName: '',
          workAttachmentList: [],
          status: ''
        },
        inputForm: {
          clientId: '',
          name: '',
          contractDate: '',
          effectiveDate: '',
          closingDate: '',
          contractType: '',
          contractAmountType: '',
          contractAmount: '',
          contractOpposite: '',
          contractFees: [],
          fees: '',
          contractFee: '',
          describes: '',
          contractSpecial: '',
          remarks: '',
          clientName: '',
          permissionFlag: '',
          showVi: true,
          workAttachmentList: [],
          status: ''
        },
        filesArra2: [],
        fileList: [],
        isFlag: true,
        showViewer: false, // 显示查看器
        url: '',
        rowurl: '',
        src: '',
        onedit: false,
        type: '',
        loadProgress: 0, // 动态显示进度条
        progressFlag: false, // 关闭进度条
        promi: null
      }
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      },
		status: {
			type: String,
			default: ''
		}
    },
    components: {
      // ElImageViewer,
      // UpLoadComponent: shallowRef(UpLoadComponent),
      // WorkClientSelect: shallowRef(WorkClientSelect),
		UpLoadComponent,
		WorkClientSelect
    },
    ossService: null,
    workContractService: null,
    workClientService: null,
    created () {
      this.ossService = new OSSSerive()
      this.workContractService = new WorkContractService()
      this.workClientService = new WorkClientService()
    },
    mounted () {
      window.onPreview = this.onPreview
    },
    watch: {
      'businessId': {
        handler (newVal) {
          if (this.businessId && this.businessId !== 'false') {
            this.ossService = new OSSSerive()
            this.init('edit', this.businessId)
          } else {
            // this.$refs.inputForm.resetFields()
            // this.visible = false
            // this.showVi = true
            // this.$refs.uploadComponent.clearUpload()
            this.init('clean', '')
          }
        },
        immediate: true,
        deep: false
      },
      'loading': {
        handler (newVal) {
          this.$emit('changeLoading', newVal)
          this.$refs.uploadComponent.changeLoading(newVal)
        }
      }
    },
    methods: {
      uploadVideoProcess (event, file, fileList) {
        this.progressFlag = true // 显示进度条
        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
        if (this.loadProgress >= 100) {
          this.loadProgress = 100
          setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
        }
      },
      async toHref (row) {
        toHref(row)
      },
      onPreview (url) {
        this.url = url
        this.showViewer = true
      },
      // 关闭查看器
      closeViewer () {
        this.url = ''
        this.showViewer = false
      },
      init (method, id) {
        this.dataList = []
        this.dataListNew = []
        this.method = method
        this.inputForm = {
          clientId: '',
          name: '',
          contractDate: '',
          effectiveDate: '',
          closingDate: '',
          contractType: '',
          contractAmountType: '',
          contractAmount: '',
          contractOpposite: '',
          contractFees: [],
          fees: '',
          contractFee: '',
          describes: '',
          contractSpecial: '',
          remarks: '',
          clientName: '',
          filesArra2: [],
          fileList: [],
          isFlag: true,
          showViewer: false, // 显示查看器
          url: '',
          rowurl: '',
          src: '',
          showVi: true,
          workAttachmentList: [],
          status: ''
        }
        this.inputForm.id = id
        if (method === 'add') {
          // this.inputForm.contractAmountType = '1'
          this.title = `新建合同登记`
        } else if (method === 'edit') {
          this.title = '修改合同登记'
        } else if (method === 'view') {
          this.inputForm.showVi = false
          this.title = '查看合同登记'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.workContractService.findById(this.inputForm.id).then((data) => {
              this.inputForm = this.recover(this.inputForm, data)
              const f = []
              if (data.fees !== null && data.fees !== undefined && data.fees !== '') {
                data.fees.split(',').forEach(item => {
                  if (item !== null && item !== undefined && item !== '') {
                    f.push(item)
                  }
                })
              }
              this.inputForm.contractFees = f
              if (this.formReadOnly) {
                method = 'view'
              }
              this.$refs.uploadComponent.newUpload(method, this.inputForm.workAttachmentList, 'workContract', 300, '合同文本、补充协议')
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      // 暂存
      async saveForm (callback) {
        this.loading = true
        this.inputForm.workAttachmentList = this.$refs.uploadComponent.getDataList()
        this.inputForm.fees = this.inputForm.contractFees.join(',')
        this.inputForm.status = '1'
        await this.workContractService.save(this.inputForm).then((data) => {
          callback()
          this.$refs.inputForm.resetFields()
          this.loading = false
        }).catch(() => {
          this.$refs.inputForm.resetFields()
          this.loading = false
        })
      },
      startForm (callback) {
        this.loading = true
        if (this.commonJS.isNotEmpty(this.inputForm.id)) {
          this.workContractService.findById(this.inputForm.id).then((data) => {
            if (this.commonJS.isNotEmpty(data.status) && data.status !== '0' && data.status !== '1' && data.status !== '3') { // 审核状态不是“未发起”或“暂存”或“撤回”，就弹出提示
              this.loading = false
              this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
              throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
            } else {
              this.startFormTrue(callback)
            }
          })
        } else {
          this.startFormTrue(callback)
        }
      },
      // 送审
      startFormTrue (callback) {
        this.$refs['inputForm'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            this.inputForm.workAttachmentList = this.$refs.uploadComponent.getDataList()
            this.inputForm.status = '2'
            this.inputForm.fees = this.inputForm.contractFees.join(',')
            await this.workContractService.save(this.inputForm).then((data) => {
              this.inputForm.id = data.businessId
              callback(data.businessTable, data.businessId, this.inputForm)
              this.$refs.inputForm.resetFields()
              this.loading = false
            }).catch(() => {
              this.$refs.inputForm.resetFields()
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      },
      reapplyForm (callback) {
        this.loading = true
        this.workContractService.findById(this.inputForm.id).then((data) => {
          if (data.status !== '4') { // 审核状态不是“驳回”，就弹出提示
            this.loading = false
            this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
            throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
          } else {
            this.startFormTrue(callback)
          }
        })
      },
      // 通过
      agreeForm (callback) {
        this.loading = true
        this.$refs['inputForm'].validate(async (valid) => {
          if (valid) {
            await this.workContractService.findById(this.inputForm.id).then((data) => {
              if (data.status !== '2') { // status的值不等于“审核中”，就弹出提示
                this.loading = false
                this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
                throw new Error()
              } else {
                this.loading = true
                this.inputForm.workAttachmentList = this.$refs.uploadComponent.getDataList()
                this.inputForm.status = '5'
                this.inputForm.fees = this.inputForm.contractFees.join(',')
                this.workContractService.save(this.inputForm).then((data) => {
                  callback(data.businessTable, data.businessId, this.inputForm)
                  this.$refs.inputForm.resetFields()
                  this.loading = false
                }).catch(() => {
                  this.$refs.inputForm.resetFields()
                  this.loading = false
                })
              }
            })
          } else {
            this.loading = false
          }
        })
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.inputForm.clientName = ''
        this.visible = false
        this.showVi = true
        this.$refs.uploadComponent.clearUpload()
      },
      httpRequest (file) {
        httpRequest(file, fileName(file), 'workContract')
      },
      handleRemove () {
        this.fileList = handleRemove()
      },
      changes (file, fileList) {
        this.dataListNew = []
        this.dataList.forEach((item) => {
          this.dataListNew.push(item)
        })
        fileList.forEach((item) => {
          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          item.createBy = this.$store.state.user.name
          this.dataListNew.push(item)
        })
        const isLt2M = file.size / 1024 / 1024 < 300
        if (isLt2M === false) {
          this.$message.error('文件大小不能超过 ' + 300 + 'M !')
          this.fileList = []
          this.filesArra2 = []
        }
      },
      async showFile (row) {
        await openWindowOnUrl(row)
      },
      // 排序
      sortChangeHandle (column) {
        this.orders = []
        if (column.order != null) {
          this.orders.push({column: this.$utils.toLine(column.prop), asc: column.order === 'ascending'})
        }
        this.refreshList()
      },
      deleteMsgById (row, index) {
        this.dataListNew.splice(index, 1)
        if (row.id !== null && row.id !== '' && row.id !== undefined) {
          this.ossService.deleteMsgById(row.id)
        }
      },
      twoDecimalPlaces (num) {
        let str = num.toString()
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        // eslint-disable-next-line eqeqeq
        if (str.length > 1 && len1 == 0 && len2 != '.') {
          str = str.substr(1, 1)
        }
        // eslint-disable-next-line eqeqeq
        if (len1 == '.') {
          str = ''
        }
        // eslint-disable-next-line eqeqeq
        if (str.indexOf('.') != -1) {
          var str_ = str.substr(str.indexOf('.') + 1)
          // eslint-disable-next-line eqeqeq
          if (str_.indexOf('.') != -1) {
            str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
          }
          if (str_.length > 2) {
            this.$message.warning(`金额小数点后只能输入两位，请正确输入！`)
            return (str = '')
          }
        }
        // eslint-disable-next-line no-useless-escape
        str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
        return str
      },
      positiveInteger (num) {
        let str = num.toString()
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        // eslint-disable-next-line eqeqeq
        if (str.length > 1 && len1 == 0 && len2 != '.') {
          str = str.substr(1, 1)
        }
        // eslint-disable-next-line eqeqeq
        if (len1 == '.') {
          str = ''
        }
        // eslint-disable-next-line no-useless-escape
        str = str.replace(/[^\d^]+/g, '') // 保留数字
        return str
      },
      tableRowClassName ({row, rowIndex}) {
        row.index = rowIndex
      },
      handleRadioChange (val) {
        if (val) {
          this.radio = val.index
        }
      },
      // 关闭窗口时调用
      closeXTable () {
        this.closePop()
      },
      rowStyle (event) {
        return 'cursor:pointer;'
      },
      async rowClick (event) {
        let id = this.gridData[event.rowIndex].id
        this.inputForm.clientId = id
        await this.workClientService.findById(id).then((data) => {
          this.inputForm.clientName = data.workClientInfo.name
        })
        this.visable = false
      },
      async getPopTable () {
        let name = this.inputForm.clientName
        await this.workClientService.list(name).then((data) => {
          this.gridData = data.records
        })
        this.$refs.pops.updatePopper()
      },
      closePop () {
        this.visable = false
      },
      changeContractFee (val, items) {
        let fee = ''
        let fees = this.inputForm.contractFees
        if (fees.length > 0) {
          fees.forEach(i => {
            items.forEach(item => {
              if (i === item.value) {
                var label = item.label
                fee = fee + ';' + label
              }
            }
            )
            this.inputForm.contractFee = fee.substring(1, fee.length)
          })
        } else {
          this.inputForm.contractFee = ''
        }
      },
      async updateStatusById (type, callback) {
        this.loading = true
        if (await this.$refs.uploadComponent.checkProgress()) {
          this.loading = false
          throw new Error()
        } else {
          if (type === 'reject' || type === 'reback') {
            this.workContractService.findById(this.inputForm.id).then((data) => {
              if (data.status !== '2') { // status的值不等于“审核中”，就弹出提示
                this.loading = false
                this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
                throw new Error()
              } else {
                // if (type === 'agree') {
                //   // 同意
                //   this.inputForm.status = '5'
                // }
                if (type === 'reject') {
                  // 驳回
                  this.inputForm.status = '4'
                }
                if (type === 'reback') {
                  // 撤回
                  this.inputForm.status = '3'
                }
                if (type === 'reject' || type === 'reback') {
                  let param = {status: this.inputForm.status, id: this.inputForm.id}
                  this.workContractService.updateStatusById(param).then(() => {
					  callback()
                    this.loading = false

                  })
                }
              }
            })
          } else if (type === 'hold') {
            this.workContractService.findById(this.inputForm.id).then((data) => {
              if (data.status !== '4') { // status的值不等于“驳回”就弹出提示
                this.loading = false
                this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
                throw new Error()
              } else {
                // 终止
                let param = {status: '1', id: this.inputForm.id}
                this.workContractService.updateStatusById(param).then(() => {
                  this.loading = false
                  callback()
                })
              }
            })
          }
        }
      },
      // updateStatusById (type) {
      //   if (type === 'agree') {
      //     this.inputForm.status = '5'
      //     this.workContractService.updateStatusById(this.inputForm)
      //   }
      //   if (type === 'reject') {
      //     this.inputForm.status = '4'
      //     this.workContractService.updateStatusById(this.inputForm)
      //   }
      //   if (type === 'reback') {
      //     this.inputForm.status = '3'
      //     this.workContractService.updateStatusById(this.inputForm)
      //   }
      // },
      checkData () {
        let begin = this.inputForm.effectiveDate
        let close = this.inputForm.closingDate
        if (close < begin) {
          this.$message.warning(`合同终止日期要大于合同开始日期`)
          this.inputForm.closingDate = ''
        }
      }
    }
  }
</script>

<style>
  .tid_40 .vxe-body--column .vxe-cell{
    padding: 1px;
    text-align: center;
  }
  .tid_40 .vxe-header--row .col--last{
    text-align: center;
  }
  .tid_45 .vxe-body--column .vxe-cell{
    padding: 1px;
    text-align: center;
  }
  .tid_45 .vxe-header--row .col--last{
    text-align: center;
  }
</style>

<style scoped>
  .avatar{
    height: 100px;
  }
  .el-divider__text {
    font-weight: bold;
    font-size: 16px;
  }
</style>
