<template>
  <div>
    <div class="sty">
      <el-page-header :content="title" @back="goBack" />
    </div>
    <el-form ref="formData" :model="formData" label-width="120px" :inline="false" size="mini" label-position="left">
      <el-card>
        <div slot="header" class="clearfix">
          <strong>客户信息</strong>
        </div>
        <el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="上级商户编码" prop="higherPrantNumber">
                <el-input v-if="isCustomer" v-model="formData.higherPrantNumber" disabled placeholder="系统自动生成" />
                <el-select
                  v-else
                  v-model="formData.higherPrantNumber"
                  filterable
                  placeholder="请选择"
                  clearable
                  style="width: 100%"
                  :disabled="moduleType == 3"
                  @change="handleChange"
                >
                  <el-option v-for="item in customerList" :key="item.id" :label="item.number" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="上级商户信息" prop="higherPrantName">
                <el-input v-if="isCustomer" v-model="formData.higherPrantName" placeholder="系统自动生成" disabled />
                <el-select
                  v-else
                  v-model="formData.higherPrantName"
                  placeholder="请选择"
                  clearable
                  filterable
                  style="width: 100%"
                  :disabled="moduleType == 3"
                  @change="handleChange"
                >
                  <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="商户编码">
                <el-input v-model="formData.number" disabled placeholder="创建自动生成（仅显示不能编辑）" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入客户信息" :disabled="moduleType == 3" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="chargeName">
                <el-input v-model="formData.chargeName" placeholder="请输入负责人姓名" :disabled="moduleType == 3" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="formData.mobile" placeholder="请输入联系电话" :disabled="moduleType == 3" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item label="地址" prop="invoiceAddress">
              <el-input v-model="formData.invoiceAddress" placeholder="请输入地址" :disabled="moduleType == 3" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="jiaxianType">
              <el-radio-group v-model="formData.jiaxianType" :disabled="moduleType == 3">
                <el-radio
                  v-for="item in [
                    { label: '嘉贤经销商', value: 'JIAXIAN' }
                  ]"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="jiaxianType">
              <ImageUpload v-if="moduleType != 3" :file-list="formData.files" />
              <template v-else>
                <div
                  v-if="formData.url"
                  style="display: flex; width: 120px; height: 120px; align-items: center; justify-content: center"
                >
                  <el-image
                    v-if="checkFileType(formData.url) == 'image'"
                    ref="img"
                    :src="$imageUrl + formData.url"
                    fit="cover"
                    :preview-src-list="[$imageUrl + formData.url]"
                    class="elImageClose"
                  />
                  <div
                    style="
                    display: flex;
                    width: 120px;
                    height: 120px;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                  "
                    @click="openPdf(formData)"
                  >
                    <img v-if="checkFileType(formData.url) == 'word'" class="file" src="@/assets/common/word.png">
                    <img v-if="checkFileType(formData.url) == 'excel'" class="file" src="@/assets/common/excel.png">
                    <img v-if="checkFileType(formData.url) == 'ppt'" class="file" src="@/assets/common/ppt.png">
                    <img
                      v-if="checkFileType(formData.url) == 'pdf'"
                      class="file"
                      style="cursor: pointer"
                      src="@/assets/common/pdf.png"
                    >

                    <img v-if="checkFileType(formData.url) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg">
                  </div>
                </div>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-if="formData.jiaxianType === 'JIAXIAN'">
        <div slot="header" class="clearfix">
          <strong>售后系统关联信息</strong>
        </div>
        <el-row :gutter="20" class="center">
          <el-col :span="3">售后系统销售编号</el-col>
          <el-col :span="4">
            <el-form-item label-width="0" prop="afterNumber" style="margin: 0">
              <el-input
                v-model="formData.afterNumber"
                placeholder="请输入售后系统销售编号"
                size="mini"
                :disabled="moduleType == 3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">售后系统绑定状态</el-col>
          <el-col :span="4">{{ formData.binding === 'YES' ? '是' : '否' }}</el-col>
          <el-col v-if="moduleType !== 3 && moduleType !== 1" :span="4">
            <el-button type="primary" size="mini" @click="handleBinding">绑定</el-button>
          </el-col>
        </el-row>
        <el-row class="radio center">
          <el-col :span="8">
            <el-form-item label-width="0" prop="afterType" style="margin: 0">
              <el-radio-group v-model="formData.afterType" :disabled="moduleType == 3">
                <el-radio v-for="item in afterTypeList" :key="item.value" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="3">绑定时间</el-col>
          <el-col :span="4">{{ formData.bindingTime }}</el-col>
          <el-col :span="3">绑定人</el-col>
          <el-col :span="4">{{ formData.bindingName }}</el-col>
        </el-row>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <strong>使用状态</strong>
        </div>
        <el-form-item label-width="0" prop="forbidStatus" style="margin: 0">
          <el-radio-group v-model="formData.forbidStatus" :disabled="moduleType == 3">
            <el-radio label="A">正常</el-radio>
            <el-radio label="B">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="moduleType !== 3" style="margin: 20px">
          <el-button type="primary" size="mini" @click="handleSubmit">提交</el-button>
          <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
        </div>
      </el-card>
      <el-card v-if="moduleType == 3">
        <div slot="header" class="clearfix">
          <strong>审核信息</strong>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="审核人">
              <el-input v-model="formData.approvalName" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="审核时间">
              <el-input v-model="formData.approvalTime" placeholder="系统自动生成" disabled /> </el-form-item></el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.approvalRemark" placeholder="请输入备注" /> </el-form-item></el-col>
        </el-row>

        <div style="margin: 20px">
          <el-button type="primary" size="mini" @click="handleExamine">同意</el-button>
          <el-button type="primary" size="mini" @click="handleExamine('SAVE')">驳回</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getDealerListV2 } from '@/api/basic_data/dealer'
import {
  addStagecustomer,
  examineStagecustomer,
  updateStagecustomer,
  updateSystem,
  getStageCustomerDetail
} from '@/api/basic_data/dealer'
import { mapGetters } from 'vuex'
import ImageUpload from '@/components/Common/image-upload.vue'
export default {
  components: {
    ImageUpload
  },
  props: {
    moduleType: {
      type: Number,
      default: null
    },
    detailsId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '新增',
      afterTypeList: [
        { label: '绑定上级商户销售编号', value: 'CHARGE' },
        { label: '绑定二级商户编号', value: 'STAGE' }
      ],
      formData: {
        higherPrantNumber: '',
        higherPrantName: '',
        number: '',
        name: '',
        chargeName: '',
        mobile: '',
        invoiceAddress: '',
        afterNumber: '',
        binding: '否',
        afterType: 'CHARGE',
        bindingTime: '',
        bindingName: '',
        forbidStatus: 'A',
        approvalName: '',
        approvalTime: '',
        approvalRemark: '',
        jiaxianType: 'JIAXIAN',
        files: [],
        url: ''
      },
      customerList: []
    }
  },
  computed: {
    ...mapGetters(['isCustomer'])
  },
  mounted() {
    if ((this.moduleType === 3 || this.moduleType === 4) && this.detailsId) {
      this.title = this.moduleType === 3 ? '审核' : '编辑'
      this.getStageCustomerDetail()
    }
    this.getDealerListV2()
  },
  methods: {
    goBack() {
      this.$emit('close')
    },
    getStageCustomerDetail() {
      getStageCustomerDetail({ id: this.detailsId }).then(res => {
        this.formData = {
          ...res.data,
          files: []
        }
        if (this.formData.url) {
          this.formData.files = [
            {
              hover: true,
              name: '营业执照',
              status: 'success',
              url: this.formData.url,
              uid: '111'
            }
          ]
        }
      })
    },
    getDealerListV2() {
      getDealerListV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'a.jiaxian_type',
            compare: '=',
            value: 'KING'
          }
        ]
      }).then(res => {
        this.customerList = res.data.records
      })
    },
    handleChange(e) {
      if (e) {
        const item = this.customerList.find(k => k.id === e)
        this.formData.higherPrantNumber = item.number
        this.formData.higherPrantName = item.name
      } else {
        this.formData.higherPrantNumber = ''
        this.formData.higherPrantName = ''
      }
    },
    handleSubmit() {
      if (this.formData.files.length) {
        this.formData.url = this.formData.files[0].url
      }
      if (this.moduleType !== 1) {
        updateStagecustomer({
          ...this.formData
        }).then(res => {
          this.$successMsg('编辑成功')
        })
      } else {
        addStagecustomer({
          ...this.formData
        }).then(res => {
          this.$successMsg('新增成功')
        })
      }
      this.$emit('close')
    },
    handleExamine(status = 'OK') {
      if (this.formData.files.length) {
        this.formData.url = this.formData.files[0].url
      }
      examineStagecustomer({
        id: this.formData.id,
        examineStatus: status,
        approvalRemark: this.formData.approvalRemark
      }).then(res => {
        this.$successMsg(status === 'OK' ? '审核成功' : '驳回成功')
        this.$emit('close')
      })
    },
    handleBinding() {
      updateSystem({
        id: this.detailsId,
        afterNumber: this.formData.afterNumber
      }).then(res => {
        getStageCustomerDetail({ id: this.detailsId }).then(res => {
          const { afterType, bindingTime, bindingName } = res.data
          this.formData.afterType = afterType
          this.formData.bindingTime = bindingTime
          this.formData.bindingName = bindingName
          this.$successMsg('绑定成功')
        })
      })
    },
    handleReset() {
      this.$refs.formData.resetFields()
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
        return 'file'
      } else {
        return ''
      }
    },
    openPdf(item) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = this.$imageUrl + item.url
      link.download = item.fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__close {
  top: 106px;
  right: 40px;
  width: 40px;
  height: 40px;
  font-size: 40px;
}
.sty {
  margin-bottom: 20px;
}
::v-deep .el-card {
  margin-bottom: 20px;
}
.center {
  display: flex;
  align-items: center;
}
.radio {
  padding: 20px 0;
}
</style>
