<template>
  <cs-page isCustom>
    <template #header>
      <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
        <view class="icon-box" v-if="!invateId">
          <u-icon name="arrow-left" size="12"></u-icon>
        </view>
        <text class="wd-font-800 wd-text-16">编辑企业信息</text>
      </view>
    </template>
    <view class="container">
      <uni-steps :options="step.options" :active="step.active"></uni-steps>
      <scroll-view scroll-y="true" class="info-container" v-if="step.active == 0">
        <u--form :model="info.form" ref="infoFormRef">
          <!-- 企业名称 -->
          <u-form-item label="名称" prop="enterprisesName" borderBottom>
            <u-input v-model="info.form.enterprisesName" border="none" placeholder="请输入名称" />
          </u-form-item>
          <!-- 企业类型 -->
          <u-form-item label="类型" prop="type" borderBottom @tap="showPicker('enterprises_type', 'type')">
            <text v-if="info.form.type">
              {{ $dict.echoDicValue(dictMap.enterprises_type, info.form.type.toString()) }}
            </text>
            <text class="placeholder" v-else>请选择类型</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <!-- 企业地址 -->
          <u-form-item label="地址" prop="address" borderBottom>
            <u-input v-model="info.form.address" border="none" placeholder="请输入地址" />
          </u-form-item>

          <!-- 环保负责人 -->
          <u-form-item label="环保负责人" prop="contactName" borderBottom labelWidth="80">
            <u-input v-model="info.form.contactName" border="none" placeholder="请输入环保负责人姓名" />
          </u-form-item>
          <!-- 联系方式 -->
          <u-form-item label="联系方式" prop="environmentalContactPhone" borderBottom labelWidth="80">
            <u-input v-model="info.form.environmentalContactPhone" border="none" placeholder="请输入联系方式" />
          </u-form-item>
          <!-- 成立时间 -->
          <u-form-item
            label="成立时间"
            prop="establishmentDate"
            borderBottom
            labelWidth="80"
            @tap="showCalendar('establishmentDate')"
          >
            <text v-if="info.form.establishmentDate">{{ info.form.establishmentDate }}</text>
            <text class="placeholder" v-else>请选择时间</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <!-- 企业照片 -->
          <u-form-item label="企业照片" prop="photo" borderBottom labelPosition="top" labelWidth="80">
            <u-upload
              :fileList="info.form.photo"
              @afterRead="addEnterprisePhoto"
              @delete="delEnterprisePhoto"
              multiple
              :maxCount="3"
            ></u-upload>
          </u-form-item>
          <!-- 企业简介 -->
          <u-form-item label="简介" prop="introduction" borderBottom labelPosition="top">
            <u--textarea
              v-model="info.form.introduction"
              placeholder="请输入简介"
              border="none"
              count="true"
            ></u--textarea>
          </u-form-item>
          <u-form-item>
            <u-button shape="circle" type="primary" @click="submitInfo">提交</u-button>
          </u-form-item>
        </u--form>
      </scroll-view>
      <view class="prove-container" v-else>
        <u--form :model="prove.form" ref="proveFormRef" v-if="prove.isEdit">
          <u-form-item
            label="资质名称"
            prop="qualificationName"
            borderBottom
            labelWidth="80"
            @tap="showPicker('enterprise_qua', 'qualificationName')"
          >
            <text v-if="prove.form.qualificationName">
              {{ $dict.echoDicValue(dictMap.enterprise_qua, prove.form.qualificationName.toString()) }}
            </text>
            <text class="placeholder" v-else>请选择资质名称</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="资质编号" prop="enterpriseAuth" borderBottom labelWidth="80">
            <u-input v-model="prove.form.enterpriseAuth" border="none" placeholder="请输入编号" />
          </u-form-item>
          <u-form-item
            label="办理日期"
            prop="handleDate"
            borderBottom
            labelWidth="80"
            @tap="showCalendar('handleDate')"
          >
            <text v-if="prove.form.handleDate">{{ prove.form.handleDate }}</text>
            <text class="placeholder" v-else>请选择办理日期</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="到期日期"
            prop="expiryDate"
            borderBottom
            labelWidth="80"
            @tap="showCalendar('expiryDate')"
          >
            <text v-if="prove.form.expiryDate">{{ prove.form.expiryDate }}</text>
            <text class="placeholder" v-else>请选择到期日期</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="描述" prop="qualificationDescription" borderBottom labelPosition="top">
            <u--textarea
              v-model="prove.form.qualificationDescription"
              placeholder="请输入描述"
              border="none"
              count="true"
            ></u--textarea>
          </u-form-item>
        </u--form>
        <view class="prove-list" v-else>
          <view class="prove" v-for="prove in prove.list" :key="prove.id" @click="editProve(prove)">
            <view class="wd-font-800" style="margin-bottom: 5px">
              {{ $dict.echoDicValue(dictMap.enterprise_qua, prove.qualificationName.toString()) }}
            </view>
            <view class="">
              {{ $util.formatDate(prove.handleDate, 'YYYY年M月D日') }}
              {{ $util.formatDate(prove.expiryDate, 'YYYY年M月D日') }}
            </view>
          </view>
        </view>
        <view class="operation" v-if="prove.isEdit">
          <u-button shape="circle" type="primary" @click="submitProve">提交</u-button>
        </view>
        <view class="operation" v-else>
          <u-button shape="circle" type="info" @click="addProve">添加资质</u-button>
          <u-button shape="circle" type="success" v-if="invateId" @click="handlerDone">完成</u-button>
        </view>
      </view>
    </view>
    <u-picker
      :show="picker.show"
      :columns="picker.data"
      @cancel="closePicker"
      closeOnClickOverlay
      keyName="label"
      ref="uPicker"
      @close="closePicker"
      @confirm="confirmPicker"
    ></u-picker>
    <uni-calendar ref="calendarRef" :insert="false" @confirm="confirmCalendar" />
  </cs-page>
</template>

<script>
import { uploadFile } from '@/api/system/file.js'
import { getDictBatchByType } from '@/api/system/dict.js'
import { showConfirm } from '@/utils/common'
import { createEnterPrise } from '@/api/enterprise/index.js'
import { createProve, getProveList, updateProve } from '@/api/enterprise/prove.js'
export default {
  data() {
    return {
      // 邀请人id
      invateId: undefined,
      // 企业基本信息
      info: {
        form: {
          id: '',
          enterprisesName: '',
          type: '', // 企业类型
          introduction: '', // 企业地址
          address: '', // 企业简介
          photo: [], // 企业照片
          contactName: '', // 环保负责人
          environmentalContactPhone: '', // 联系方式
          establishmentDate: '' // 成立时间
        },
        rules: {
          enterprisesName: {
            required: true,
            message: '请输入企业名称',
            trigger: ['blur']
          },
          type: {
            type: 'string',
            required: true,
            message: '请选择企业类型',
            trigger: ['blur', 'change']
          },
          address: {
            required: true,
            message: '请输入企业地址',
            trigger: ['blur']
          },
          contactName: {
            required: true,
            message: '请输入环保负责人',
            trigger: ['blur']
          },
          environmentalContactPhone: {
            required: true,
            message: '请输入联系方式',
            trigger: ['blur']
          },
          photo: {
            require: true,
            min: 1,
            message: '至少上传一张图片',
            trigger: ['blur', 'change']
          }
        }
      },
      // 字典
      dictMap: {},
      // 选择器
      picker: {
        show: false,
        // 做表单中键的缓存用
        key: null,
        data: []
      },
      // 日历控件
      calendar: {
        // 做表单中键的缓存用
        key: null
      },
      // 进度条
      step: {
        options: [
          {
            title: '基本信息'
          },
          {
            title: '资质信息'
          }
        ],
        active: 0
      },
      // 资质相关
      prove: {
        list: [],
        // 切换资质表单与列表的开关
        isEdit: true,
        loading: false,
        form: {
          enterpriseId: '',
          id: '',
          qualificationName: '',
          expiryDate: '',
          qualificationDescription: '',
          handleDate: '',
          enterpriseAuth: ''
        }
      }
    }
  },
  onLoad(res) {
    if (res.invateId) {
      this.invateId = res.invateId
    }
    this.getDict()
  },
  onReady() {
    this.step.active == 0 && this.$refs.infoFormRef.setRules(this.info.rules)
    this.initProveList()
  },
  methods: {
    /**
     * 选择图片并上传
     * @param {Object} e
     */
    async addEnterprisePhoto(e) {
      this.info.form.photo = e.file.map(p => {
        return {
          ...p,
          status: 'uploading',
          message: '上传中'
        }
      })
      // 使用promise.all()方法上传到后端做统一接收
      await Promise.all(
        this.info.form.photo.map(async (p, i) => {
          const res = await uploadFile({ name: `file`, filePath: p.url })
          return {
            ...res.data,
            status: 'success',
            message: ''
          }
        })
      ).then(res => {
        this.info.form.photo = res
      })
    },
    /**
     * 删除图片
     * @param {Object} e
     */
    delEnterprisePhoto(e) {
      this.info.form.photo.splice(e.index, 1)
    },
    /**
     * 弹出选择器
     * @param {String} type 字典类型
     * @param {String} key 表单中需要赋值的健
     */
    showPicker(type, key) {
      // 取出字典中type对应的列表并赋值给选择器的列表
      this.picker.data.push(this.dictMap[type])
      this.picker.key = key
      this.picker.show = true
    },
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({ type: ['enterprises_type', 'enterprise_qua'].join(',') })
      this.dictMap = {
        ...dict.data
      }
    },
    /**
     * 选择器确认回调
     * @param {Object} e
     */
    confirmPicker(e) {
      const { value } = e
      if (this.step.active == 1) {
        // 若是步骤索引为1 则向资质表单赋值
        this.prove.form[this.picker.key] = value[0].value
      } else {
        // 若是步骤索引为0 则向企业基本信息表单赋值
        this.info.form[this.picker.key] = value[0].value
      }
      this.closePicker()
    },
    /**
     * 关闭选择器
     */
    closePicker() {
      this.picker = {
        show: false,
        key: '',
        data: []
      }
    },
    /**
     * 显示日历
     * @param {Object} key 表单中需要赋值的键
     */
    showCalendar(key) {
      this.$refs.calendarRef.open()
      this.calendar = {
        key
      }
    },
    /**
     * 日历选中之后的回调
     * @param {Object} e
     */
    confirmCalendar(e) {
      if (this.step.active == 1) {
        // 若是步骤索引为1 则向资质表单赋值
        this.prove.form[this.calendar.key] = e.fulldate
      } else {
        // 若是步骤索引为0 则向企业基本信息表单赋值
        this.info.form[this.calendar.key] = e.fulldate
      }
      this.closeCalendar()
    },
    /**
     * 关闭日历
     */
    closeCalendar() {
      this.calendar = {
        key: null
      }
    },
    /**
     * 企业基本信息表单提交事件
     */
    submitInfo() {
      this.$refs.infoFormRef.validate().then(async res => {
        this.handlerInfoApi()
      })
    },
    /**
     * 触发创建企业接口
     */
    async handlerInfoApi() {
      const data = this.info.form
      data.fileIds = this.info.form.photo.map(p => p.file_id)
      data.userId = this.invateId
      let enterprise
      if (this.info.form.id) {
        // 修改企业
      } else {
        enterprise = await createEnterPrise(data)
        //新增企业时需要将返回的id存到表单中，作为资质上传、修改的关联id
        this.info.form.id = enterprise.data
        uni.showToast({
          icon: 'success',
          title: '操作成功'
        })
        // 将步骤显示到下一个
        this.step.active = 1
      }
      this.initProveList()
    },
    /**
     * 添加资质
     */
    addProve() {
      this.prove.isEdit = true
    },
    /**
     * 提交资质
     */
    submitProve() {
      this.handlerProveApi()
    },
    /**
     * 初始化资质列表
     */
    async initProveList() {
      this.prove.loading = true
      const res = await getProveList({ pageSize: -1, enterpriseId: this.info.form.id })
      this.prove.list = res.data.list
      this.prove.loading = false
    },
    /**
     * 触发资质新增、修改的接口
     */
    async handlerProveApi() {
      let prove
      const data = this.prove.form
      data.enterpriseId = this.info.form.id
      if (data.id) {
        prove = await updateProve(data)
      } else {
        prove = await createProve(data)
      }
      this.prove.isEdit = false
      uni.showToast({
        icon: 'success',
        title: '操作成功'
      })
      this.prove.form = {
        enterpriseId: '',
        id: '',
        qualificationName: '',
        expiryDate: '',
        qualificationDescription: '',
        handleDate: '',
        enterpriseAuth: ''
      }
      this.initProveList()
    },
    /**
     * 编辑资质
     * @param {Object} prove 列表中的资质实例对象
     */
    editProve(prove) {
      this.prove.form = prove
      this.prove.form.handleDate = this.$util.formatDate(prove.handleDate, 'YYYY-MM-DD')
      this.prove.form.expiryDate = this.$util.formatDate(prove.expiryDate, 'YYYY-MM-DD')
      this.prove.isEdit = true
    },
    /**
     * 完成事件
     */
    handlerDone() {
      uni.navigateTo({
        url: '/sub/common/waiting'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  .info-container {
    max-height: 75vh;
    padding: 0 10px;
    margin-top: 10px;
  }
  .prove-container {
    flex: 1;
    position: relative;
    padding: 0 10px;
    margin-top: 10px;
    .prove-list {
      .prove {
        margin-bottom: 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #c0c4cc;
      }
    }
    .operation {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
    }
  }
}
.placeholder {
  color: #c0c4cc;
}
::v-deep .u-form-item__body {
  gap: 5px;
}
.address {
}
</style>