<script>
import {downFileBase64, editVerifyTask, uploadFile} from "@/api/commitment";
import {v4 as uuidv4} from "uuid";

export default {
  name: "IndicatorComponents",
  computed: {
    indicatorList() {
      return this.$store.state.template.indicatorList.map(item => {
        if (item.indicatorInputBody) {
          item.indicatorInputBody = item.indicatorInputBody.replace('&', item.inputBody + item.inputSegment)
        }
        return item
      })
    },
  },
  watch: {
    indicatorList: {
      handler(value) {
        if (value && value.length > 0 && !this.formStatesInitFlag) {
          value.forEach((item) => {
            this.$nextTick(() => {
              this.$set(this.formStates, item.uuid, {
                fileList: []
              })
            })
          })
          this.formStatesInitFlag = true
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      formStatesInitFlag: false,
      formStates: {},
      checkResultColumns: [
        {
          text: '整改',
          value: 1
        },
        {
          text: '整改扣分',
          value: 2
        },
        {
          text: '符合',
          value: 0
        }
      ],
      checkGoalColumns: [
        {
          text: '整改 0分',
          value: 0
        },
        {
          text: '整改扣分 -10分',
          value: -10
        },
        {
          text: '符合',
          value: 0
        }
      ],
      checkResultPopupVisible: false,
      checkScorePopupVisible: false,
    }
  },
  methods: {
    onCheckResultSubmit(indicateItem) {
      console.log(this.formStates)
      editVerifyTask([
        {
          uuid: indicateItem.uuid,
          promiseId: indicateItem.promiseId,
          indicatorId: indicateItem.indicatorId,
          indicatorInput: indicateItem.indicatorInput,
          indicatorInputBody: indicateItem.indicatorInputBody,
          auditor: '张三', // 为了调试写死
          auditResult: this.checkResultColumns.find(item => item.text === this.formStates[indicateItem.uuid].auditResult).value,
          auditScore: this.checkGoalColumns.find(item => item.text === this.formStates[indicateItem.uuid].auditScore).value,
          auditRemark: this.formStates[indicateItem.uuid].auditRemark,
          //文件上传字段
          expandStr: this.formStates[indicateItem.uuid].fileList.map(item => item.uuid).join(','),
          isDelete: 0
        }
      ]).then(res => {
        if (res.code === 0) {
          this.$toast('核查成功')
        }
      })
    },
    handleCheckResultConfirm(value, uuid) {
      this.formStates[uuid].auditResult = value.text
      this.checkResultPopupVisible = false
    },
    handleCheckGoalConfirm(value, uuid) {
      this.formStates[uuid].auditScore = value.text
      this.checkScorePopupVisible = false
    },
    beforeUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$toast('上传的图片大小不能超过 50MB!');
        return false;
      }
      return true;
    },
    afterRead(file, uuid) {
      const formData = new FormData()

      uploadFile({
        uuid: uuidv4(),
        file: formData
      }).then(res => {
        if (res.code === 0) {
          this.formStates[uuid].fileList.push({
            uuid: res.data,
            url: URL.createObjectURL(file.file)
          })
          console.log('上传成功', this.formStates)
        }
      })
    },
    /* 附件下载 */
    handleFileDown(item) {
      downFileBase64({
        uuid: item
      }).then(res => {
        if (res.code === 0) {
          const a = document.createElement('a')
          a.href = res.data
          a.download = '附件'
          a.click()
        }
      })
    }
  }
}
</script>

<template>
  <view>
    <view v-for="(item,index) in indicatorList" :key="index" class="indicator-style">
      <view class="indicator-body">
        {{ item.indicatorInputBody }}
      </view>
      <view v-if="!item.approvalStatus && item.approvalStatus !== 0">
        <view class="title">监管核查
          <view>涉及整改、整改扣分结果，需要走审批二次确认</view>
        </view>
        <van-divider/>
        <van-form v-if="formStates[item.uuid]" @submit="onCheckResultSubmit(item)">
          <!--核查结果-->
          <van-field
              readonly
              clickable
              name="auditResult"
              :value="formStates[item.uuid].auditResult"
              label="核查结果"
              placeholder="请选择核查结果"
              @click="checkResultPopupVisible = true"
          />
          <van-popup v-model="checkResultPopupVisible" position="bottom">
            <van-picker
                show-toolbar
                value-key="text"
                :columns="checkResultColumns"
                @confirm="(value)=>handleCheckResultConfirm(value,item.uuid)"
                @cancel="checkResultPopupVisible = false"
            />
          </van-popup>
          <!--核查得分-->
          <van-field
              readonly
              clickable
              name="auditScore"
              :value="formStates[item.uuid].auditScore"
              label="核查得分"
              placeholder="请选择核查得分"
              @click="checkScorePopupVisible = true"
          />
          <van-popup v-model="checkScorePopupVisible" position="bottom">
            <van-picker
                show-toolbar
                value-key="text"
                :columns="checkGoalColumns"
                @confirm="(value)=>handleCheckGoalConfirm(value,item.uuid)"
                @cancel="checkScorePopupVisible = false"
            />
          </van-popup>
          <!--核查说明-->
          <van-field
              clickable
              name="auditRemark"
              v-model="formStates[item.uuid].auditRemark"
              label="核查说明"
              type="textarea"
              placeholder="请输入核查说明"
          />
          <!--附件上传-->
          <van-field label="文件上传">
            <template #input>
              <view class="upload-files">
                <view
                    v-for="item in formStates[item.uuid].fileList"
                >
                  <img :src="item.url" style="width: 80px; height: 80px;"/>
                </view>
                <van-uploader v-if="formStates[item.uuid].fileList.length < 3"
                              :before-upload="beforeUpload"
                              accept="image/*,pdf"
                              :after-read="(file)=>afterRead(file,item.uuid)"
                >
                </van-uploader>
              </view>
              <view class="upload-description">
                <view>
                  支持png、jpg、pdf，最大50M
                </view>
                <view>
                  最多3个附件
                </view>
              </view>
            </template>
          </van-field>

          <view style="margin: 16px;">
            <van-button round block type="info" native-type="submit">核查确认</van-button>
          </view>
        </van-form>
      </view>
      <view v-else>
        <view class="other-title">
          监管核查
          <view style="color: #FF6B00" v-if="item.approvalStatus === 0">
            审批状态：待审批
          </view>
          <view style="color: #15BE50" v-if="item.approvalStatus === 1">
            审批状态：已通过
          </view>
          <view style="color: #D40000" v-if="item.approvalStatus === 2">
            审批状态：已拒绝
          </view>
        </view>
        <van-divider/>
        <van-form v-if="formStates[item.uuid]">
          <!--核查结果-->
          <van-field
              name="auditResult"
              label="核查结果"
          >
            <template #input>
              <view v-if="item.auditResult === 0">符合</view>
              <view v-if="item.auditResult === 1">整改</view>
              <view v-if="item.auditResult === 2">整改扣分</view>
            </template>
          </van-field>
          <!--核查得分-->
          <van-field
              name="auditScore"
              label="核查得分"
          >
            <template #input>
              <view v-if="item.auditScore === 0">0分</view>
              <view v-if="item.auditScore === -10">-10分</view>
            </template>
          </van-field>
          <!--核查说明-->
          <van-field
              name="auditRemark"
              label="核查说明"
          >
            <template #input>
              <view>{{ item.auditRemark }}</view>
            </template>
          </van-field>
          <van-field
              name="expandStr"
              label="附件"
          >
            <template #input>
              <view class="file-style">
                <view v-for="(item,index) in item.expandStr.split(',')" @click="handleFileDown(item)">
                  附件{{ index + 1 }}
                </view>
              </view>
            </template>
          </van-field>
        </van-form>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.indicator-style {
  min-height: 40px;
  border: 1px solid #e8e8e8;
  margin: 10px 0;
  padding: 5px
}

.indicator-body {
  background: #F6F6F6;
  border-radius: 4px;
  font-weight: 400;
  font-size: 15px;
  color: #666666;
  text-align: justify;
  padding: 5px;
  min-height: 40px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;

  view {
    color: #FF6B00;
    font-size: 12px;
    margin-top: 5px;
  }
}

.upload-description {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

.upload-files {
  display: flex;
  flex-direction: column;
}

.other-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  view {
    font-size: 12px;
  }
}

.file-style {
  font-size: 14px;
  font-weight: 400;
  color: #1492FF;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
</style>