<template>
  <view class="view">
    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        企业名称
      </view>
      <view class="value">
        <input
          class="input-value"
          type="text"
          placeholder-class="txt"
          placeholder="请输入企业名称"
          v-model="form.enterpriseName"
          @blur="proofName"
        />
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        企业地址
      </view>
      <view class="value" @tap="chooseAddress">
        <input
          class="input-value"
          type="text"
          placeholder-class="txt"
          placeholder="请选择企业地址"
          v-model="form.address"
          disabled
        />
        <u-icon name="map"></u-icon>
      </view>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        企业介绍
      </view>
      <view class="value" @tap="goIntruduce">
        <view class="input-textarea" v-if="form.introduce">
          {{ form.introduce }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请输入企业介绍
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="upload-wrapper">
      <view
        class="wd-flex"
        style="
          justify-content: space-between;
          align-items: center;
          width: 100%;
        "
      >
        <view style="">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          企业照片
        </view>
        <view style="color: #808080">最多可传3张</view>
      </view>
      <u-upload
        :fileList="form.photo"
        @afterRead="addEnterprisePhoto"
        @delete="delEnterprisePhoto"
        multiple
        :maxCount="3"
        width="101"
        height="101"
      ></u-upload>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        企业标签
      </view>
      <view class="value" @tap="goTags">
        <view class="input-textarea" v-if="form.introduce">
          {{ form.tags }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请选择企业标签
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        企业负责人
      </view>
      <view class="value">
        <input
          class="input-value"
          type="text"
          placeholder-class="txt"
          placeholder="请输入企业负责人"
          v-model="form.contactName"
        />
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        负责人电话
      </view>
      <view class="value">
        <!-- <input
          class="input-value"
          type="text"
          placeholder-class="txt"
          placeholder="请输入负责人电话"
          v-model="form.environmentalContactPhone"
          @blur="proofName"
        /> -->
        <uni-easyinput
          type="text"
          placeholder="请输入负责人电话"
          :inputBorder="false"
          style="text-align: center"
          v-model="form.environmentalContactPhone"
          @blur="proofName"
          :clearable="false"
          :autoHeight="true"
        ></uni-easyinput>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="upload-wrapper">
      <view
        class="wd-flex"
        style="
          justify-content: space-between;
          align-items: center;
          width: 100%;
        "
      >
        <view style="">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          相关资质
        </view>
        <view
          class="wd-flex"
          style="color: #17c653; gap: 4px; align-items: center"
          @tap="addProve"
        >
          <u-icon name="plus-circle" color="#17C653" size="14"></u-icon>
          <text style="line-height: 1rem">新增资质</text>
        </view>
      </view>
      <view
        class="prove"
        v-for="(p, index) in prove"
        :key="index"
        v-if="prove.length > 0"
        @tap="editProve(p)"
      >
        <image
          :src="p.photo[0].url"
          style="width: 90px; height: 70px"
          mode="widthFix"
        ></image>
        <view class="info">
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质名称</text>
            <view class="wd-font-800">
              {{
                $dict.echoDicValue(
                  dictMap.enterprise_qua,
                  p.qualificationName.toString()
                )
              }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质编号</text>
            <view class="wd-font-800">
              {{ p.enterpriseAuth }}
            </view>
          </view>
          <view class="wd-flex" style="gap: 8px; align-items: center">
            <text class="label">资质到期</text>
            <view class="wd-font-800">
              {{ $util.formatDate(p.expiryDate, 'YYYY/M/D') }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <cs-bottom-wrapper>
      <view class="operation">
        <button class="btn green">提交审核</button>
      </view>
    </cs-bottom-wrapper>
  </view>
</template>

<script>
import { uploadFile } from '@/api/system/file.js'
import { getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      form: {
        enterpiseName: undefined,
        address: undefined,
        gpsLocation: undefined,
        introduce: '',
        photo: [],
        tags: {}
      },
      dictMap: {},
      prove: [
        {
          enterpriseAuth: '123',
          expiryDate: '2025-02-24',
          id: '',
          photo: [
            {
              id: 1890,
              message: '',
              status: 'success',
              url: 'http://60.23.29.213:19001/huanbao/7f71a5ed324fd6d35d61c7b6d68d8e6e06f16557f3150af3dece8ab386f9f189.png'
            }
          ],
          qualificationName: '1'
        }
      ],
      inviteId: undefined
    }
  },
  onLoad(res) {
    this.inviteId = res.inviteId
    this.getDict()
  },
  onShow() {
    uni.$on('enterpriseIntroduce', data => {
      this.form.introduce = data.introduce
    })
    uni.$on('enterpriseTag', data => {
      this.form.tags = data
    })
    uni.$on('prove', data => {
      this.prove.push(data)
    })
  },
  methods: {
    proofName(v) {
      console.log(v.detail.value)
    },
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['enterprise_qua'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    chooseAddress() {
      uni.chooseLocation({
        success: res => {
          this.form.address = res.address
          this.form.gpsLocation = res.latitude + ',' + res.longitude
        }
      })
    },
    goIntruduce() {
      uni.navigateTo({
        url: `/sub/invite/enterpriseIntroduce?introduce=${this.form.introduce}`
      })
    },
    goTags() {
      uni.navigateTo({
        url: `/sub/invite/enterpriseTags?tags=${this.form.tags}`
      })
    },
    /**
     * 选择图片并上传
     * @param {Object} e
     */
    async addEnterprisePhoto(e) {
      e.file.forEach(p => {
        this.form.photo.push({
          ...p,
          status: 'uploading',
          message: '上传中'
        })
      })
      // 使用promise.all()方法上传到后端做统一接收
      await Promise.all(
        this.form.photo.map(async (p, i) => {
          if (p.status == 'uploading') {
            const res = await uploadFile({ name: `file`, filePath: p.url })
            return {
              ...res.data,
              status: 'success',
              message: ''
            }
          }
          return p
        })
      ).then(res => {
        this.form.photo = res
      })
    },
    /**
     * 删除图片
     * @param {Object} e
     */
    delEnterprisePhoto(e) {
      this.form.photo.splice(e.index, 1)
    },
    addProve() {
      uni.navigateTo({
        url: '/sub/invite/prove'
      })
    },
    editProve(prove) {
      uni.navigateTo({
        url: `/sub/invite/prove?prove=${JSON.stringify(prove)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  padding: 12px;
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 100vh;
  padding-bottom: 12vh;
}
.block {
  display: flex;
  flex-flow: row nowrap;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  .value {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 4px;
    .input-value {
      flex: 1;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: auto;
      display: block;
      font-family: UICTFontTextStyleBody;
      height: 1.4rem;
      min-height: 1.4rem;
      overflow: hidden;
    }
    .input-textarea {
      flex: 1;
      display: -webkit-box;
      overflow: hidden;
      text-align: right;
      max-height: 3rem;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-all;
      cursor: auto;
      display: block;
      font-family: UICTFontTextStyleBody;
      height: 1.4rem;
      min-height: 1.4rem;
      overflow: hidden;
    }
  }
}

.prove {
  border-radius: var(--Number-12px, 12px);
  border: 1px solid var(--LightMode-Grey-Grey-100, #f9f9f9);
  background: var(--LightMode-Light-Light, #fff);
  display: flex;
  padding: var(--Number-12px, 12px);
  align-items: center;
  gap: var(--Number-12px, 12px);
  font-size: 28rpx;
  flex-flow: row nowrap;
  .info {
    height: 72px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
}

.upload-wrapper {
  display: flex;
  flex-flow: column nowrap;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  gap: 12px;
}

::v-deep .uni-easyinput__content-input {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: auto;
  display: block;
  font-family: UICTFontTextStyleBody;
  height: 1.4rem;
  min-height: 1.4rem;
  overflow: hidden;
  padding-right: 0;
}
::v-deep .uni-easyinput__placeholder-class {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: auto;
  display: block;
  font-family: UICTFontTextStyleBody;
  height: 1.4rem;
  min-height: 1.4rem;
  font-size: 14px;
  overflow: hidden;
}
.operation {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  .btn {
    flex: 1;
    border-radius: 8px;
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: center;
  }
  .green {
    background-color: $cs-color-main;
    color: #fff;
  }
}
</style>