<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="showModelThis = false"
  >
    <el-card style="margin-top: -20px">
      <el-row>
        <el-col :span="24">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            size="mini"
            :rules="rulesThis"
            label-width="90px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="1" style="padding: 20px 0 0 0">
                <ul class="tc fff">
                  <li>企</li>
                  <li>业</li>
                  <li>信</li>
                  <li>息</li>
                </ul>
              </el-col>
              <el-col :span="23" style="border-left: 1px solid #dcdfe6">
                <el-row>
                  <el-col :span="4">
                    <el-form-item label="法人" required>
                      {{ ruleForm.inv_legaler }}</el-form-item></el-col>
                  <el-col :span="4">
                    <el-form-item
                      label="营业执照"
                      prop="license_img"
                      class="activity-upload"
                    >
                      <div
                        class="btnupload"
                        style="position: relative; width: 28px; height: 28px"
                      >
                        <img
                          v-if="ruleForm.license_img"
                          v-viewer
                          :src="ruleForm.license_img"
                          class="avatar"
                        >
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="企业名称" required>
                      {{ ruleForm.company }}
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-row>
                      <el-col
                        :span="8"
                      ><el-form-item
                        label="纳税识别号"
                        required
                        label-width="100px"
                        style="width: 100%"
                      >
                        {{ ruleForm.inv_code }}
                      </el-form-item>
                      </el-col>
                      <el-col :span="7">
                        <el-form-item label="成立日期" required>
                          {{ ruleForm.inv_time }}
                        </el-form-item>
                      </el-col>

                      <el-col :span="9">
                        <el-form-item label="公司类型" required>
                          {{ ruleForm.type }}</el-form-item></el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="18">
                    <el-form-item label="详细地址" required>
                      {{ ruleForm.addr }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系人" required>
                      {{ ruleForm.contactor }}
                    </el-form-item></el-col>

                  <el-col :span="24">
                    <el-form-item label="营业范围" required>
                      {{ ruleForm.inv_scope }}
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>

            <el-row style="border-top: 1px solid #dcdfe6">
              <el-col :span="1" style="padding: 20px 0 0 0">
                <ul class="tc sss">
                  <li>开</li>
                  <li>票</li>
                  <li>信</li>
                  <li>息</li>
                </ul>
              </el-col>
              <el-col
                :span="23"
                style="padding: 20px 0 0 0; border-left: 1px solid #dcdfe6"
              >
                <el-row>
                  <el-col :span="13">
                    <el-form-item size="medium" label="公司抬头" prop="invoice_title">
                      <el-input
                        v-model="ruleForm.invoice_title"
                        placeholder="公司抬头"
                        :disabled="isDetail == '007'"
                        maxlength="100"
                      />
                    </el-form-item>

                    <el-form-item size="medium" label="银行名称" prop="inv_bank">
                      <el-input
                        v-model="ruleForm.inv_bank"
                        placeholder="银行名称"
                        :disabled="isDetail == '007'"
                        maxlength="100"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="11">
                    <el-form-item size="medium" label="联系电话" prop="invoice_mobile">
                      <el-input
                        v-model="ruleForm.invoice_mobile"
                        placeholder="联系电话"
                        maxlength="100"
                        :disabled="isDetail == '007'"
                      >
                        <el-select slot="prepend" v-model="currentMobileMode" style="width:120px">
                          <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                      </el-input>
                    </el-form-item>

                    <el-form-item size="medium" label="银行卡号" prop="inv_bankNo">
                      <el-input
                        v-model="ruleForm.inv_bankNo"
                        placeholder="银行卡号"
                        maxlength="100"
                        :disabled="isDetail == '007'"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item size="medium" label="联系地址" prop="inv_addr">
                      <el-input
                        v-model="ruleForm.inv_addr"
                        placeholder="联系地址"
                        maxlength="100"
                        :disabled="isDetail == '007'"
                      />
                    </el-form-item>
                  </el-col>

                  <div style="width: 100%; text-align: right">
                    <el-button
                      v-if="isDetail !== '007'"
                      type="primary"
                      :size="'small'"
                      @click="submitForm"
                    >保 存
                    </el-button>
                    <el-button :size="'small'" @click="showModelThis = false">{{
                      isDetail == "007" ? "关 闭" : "取 消"
                    }}</el-button>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from '@/apis/service/serviceParam/supplier'
import resToken from '@/mixins/resToken'
import { isMobile, isPhone, invTime, isqz, isqzf, iszf, isz } from '@/utils/validate'

export default {
  name: 'WorkCompany',
  mixins: [resToken],
  props: ['showModel', 'id', 'sitem', 'isDetail'],
  data() {
    const validatemobile = (rule, value, callback) => {
      if (value !== '') {
        if (isPhone(value) || isMobile(value)) {
          callback()
        } else {
          callback(new Error('联系电话格式不正确！'))
        }
      } else {
        callback(new Error('联系电话不能为空！'))
      }
    }

    const basicRule = { required: true, trigger: 'blur' }

    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now()
        }
      },
      supplier_name: '',
      accountNames: '',
      loading: false,
      title: '供应商升级业务企业',
      showModelThis: this.showModel,
      currentMobileMode: '0',
      ruleForm: {
        id: '',
        code: '',
        company: '', // 公司名称
        type: '', //	公司类型
        inv_code: '', //	纳税识别号
        inv_legaler: '', //	法人
        inv_time: '', // 注册日期
        inv_addr: '', // 注册地址
        inv_bank: '', //	银行
        inv_bankNo: '', //	银行账户
        contactor: '', //		联系人
        invoice_mobile: '', //	联系人电话
        addr: '', //		联系地址
        inv_scope: '', //	经营范围
        license_img: '', //	营业执照
        invoice_title: ''
      },
      rulesThis: this.rules,
      options: [
        {
          value: '0',
          label: '区-固-分',
          rule: {
            ...basicRule,
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error('联系电话不能为空！'))
              }

              if (!isqzf(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            }
          }
        },
        {
          value: '1',
          label: '区-固',
          rule: {
            ...basicRule,
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error('联系电话不能为空！'))
              }

              if (!isqz(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            }
          }
        },
        {
          value: '2',
          label: '固-分',
          rule: {
            ...basicRule,
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error('联系电话不能为空！'))
              }

              if (!iszf(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            }
          }
        },
        {
          value: '3',
          label: '固',
          rule: {
            ...basicRule,
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error('联系电话不能为空！'))
              }

              if (!isz(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            }
          }
        },
        {
          value: '4',
          label: '手机号',
          rule: {
            ...basicRule,
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error('联系电话不能为空！'))
              }

              if (!isMobile(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            }
          }
        }
      ],
      rules: {
        inv_bank: [
          {
            required: true,
            message: '银行名称不能为空！',
            trigger: 'blur'
          }
        ],
        inv_bankNo: [
          {
            required: true,
            message: '银行卡号不能为空！',
            trigger: 'blur'
          }
        ],

        invoice_mobile: [{
          ...basicRule,
          validator(rule, value, callback) {
            if (!value) {
              return callback(new Error('联系电话不能为空！'))
            }

            if (!isqzf(value)) {
              callback(new Error('联系电话格式不正确！'))
            } else {
              callback()
            }
          }
        }],

        inv_addr: [{ required: true, message: '联系地址不能为空！', trigger: 'blur' }],
        invoice_title: [{ required: true, message: '公司抬头不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    showModel: function(val) {
      this.showModelThis = val
      if (val) {
        this.initForm()
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit('cancel')
      }
    },
    currentMobileMode() {
      this.$set(this.rulesThis.invoice_mobile, '0', this.options[this.currentMobileMode].rule)
    }
  },
  methods: {
    async initForm() {
      this.supplier_name = ''
      this.loading = true
      this.rulesThis = this.rules
      await this.resetForm()
      await this.initData()
      this.loading = false
    },

    async initData() {
      const { code } = this.sitem
      const res = await asyncRequest.detail({ code })
      if (res && res.code === 0 && res.data) {
        const {
          id,
          name, // 公司名称
          nature, //	公司类型
          registercode, //	纳税识别号
          legaler, //	法人
          registertime, // 注册日期
          contactor, //		联系人
          addr, //		联系地址
          scope, //	经营范围
          license_img //	营业执照
        } = res.data
        // console.log(invTime(registertime));
        this.ruleForm = {
          id: id || '',
          code,
          company: name || '', // 公司名称
          type: nature || '', //	公司类型
          inv_code: registercode || '', //	纳税识别号
          inv_legaler: legaler || '', //	法人
          inv_time: invTime(registertime) || '', // 注册日期
          inv_addr: '', // 注册地址
          inv_bank: '', //	银行
          inv_bankNo: '', //	银行账户
          contactor: contactor || '', //		联系人
          invoice_mobile: '', //	联系人电话
          addr: addr || '', //		联系地址
          inv_scope: scope || '', //	经营范围
          license_img: license_img || '' //	营业执照
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout()
      } else {
        this.$message.warning(res.message)
      }
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
          this.$refs.ruleForm.clearValidate()
          this.ruleForm = {
            id: '',
            code: '',
            company: '', // 公司名称
            type: '', //	公司类型
            inv_code: '', //	纳税识别号
            inv_legaler: '', //	法人
            inv_time: '', // 注册日期
            inv_addr: '', // 注册地址
            inv_bank: '', //	银行
            inv_bankNo: '', //	银行账户
            contactor: '', //		联系人
            invoice_mobile: '', //	联系人电话
            addr: '', //		联系地址
            inv_scope: '', //	经营范围
            license_img: '' //	营业执照
          }
        }
      })
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.loading) {
            return
          }
          this.loading = true
          const { code, inv_bank, inv_bankNo, inv_addr, invoice_mobile, invoice_title } = this.ruleForm

          const model = {
            code,
            inv_bank,
            inv_bankNo,
            inv_addr,
            invoice_mobile,
            invoice_title
          }

          const res = await asyncRequest.inv_update(model)
          this.loading = false
          if (res && res.code === 0) {
            this.$notify.success({
              title: '升级成功',
              message: ''
            })
            this.showModelThis = false
            // 刷新
            this.$emit('refresh')
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout()
          } else {
            this.$message.warning(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.workCompany {
  .fff,
  .sss {
    // border-right: 1px solid #DCDFE6;
    box-sizing: border-box;
    li {
      line-height: 20px;
      font-size: 16px;
      font-weight: bold;
      height: 20px;
    }
  }
  .fff {
    padding: 115px 0 0 0;
  }
}
</style>
