<template>
  <view class="container">
    <Navbar title="入户安检信息" canBack></Navbar>
    <view class="checkCardCss">
      <basisCellCard title="安检基础信息" :list="list"></basisCellCard>
    </view>
    <view class="photoCardCss">
      <basisCellCard title="现场照片" v-if="imgParams.xctpImgList.length">
        <!-- <u-grid :border="false" @click="goToAppPage" col="0"> -->
        <!-- <u-grid-item class="margin-top-sm"> -->
        <u-upload :fileList="imgParams.xctpImgList" name="1" width="70px" :height="'70px'" :deletable="false"
                  :maxCount="1"></u-upload>
        <!-- <u-image :showLoading="true" :src="item.url?item.url:''" width="70px" height="70px"></u-image> -->
        <!-- </u-grid-item> -->
        <!-- </u-grid> -->
      </basisCellCard>
    </view>

    <view class="operationCardCss" v-show="imgParams.czgImg.length">
      <basisCellCard title="操作工签名">
        <view class="margin-top">
          <u-upload :fileList="imgParams.czgImg" name="2" width="85vw" height="80px" :deletable="false"
                    :maxCount="1"></u-upload>
          <!-- 目前使用upload回显，upload回显支持base64或blob模式 -->
          <!-- <u-image width="100%" height="80px" :src="imgParams.czgImg"
            @click="handlePreview(imgParams.czgImg)"></u-image> -->
        </view>
      </basisCellCard>
    </view>

    <view class="userCardCss" v-show="imgParams.khqmImg.length">
      <basisCellCard title="用户签名">
        <view class="margin-top">
          <u-upload :fileList="imgParams.khqmImg" name="3" width="85vw" height="80px" :deletable="false"
                    :maxCount="1"></u-upload>
          <!-- 目前使用upload回显，upload回显支持base64或blob模式 -->
          <!-- <u-image width="100%" height="80px" :src="imgParams.khqmImg"
            @click="handlePreview(imgParams.khqmImg)"></u-image> -->
        </view>
      </basisCellCard>
    </view>

  </view>
</template>

<script>
import basisCellCard from '@/components/basisCellCard/basisCellCard'

export default {
  components: {
    basisCellCard
  },
  data() {
    return {
      list: [{
        name: '被检查单位',
        value: '孝感市某某餐饮酒店',
        key: 'fAjdz'
      }, {
        name: '检查单位',
        value: '孝感市众兴液化石油气有限责任公司',
        key: 'fJcczmc'
      }, {
        name: '检查时间',
        value: '2024年1月22日',
        key: 'fCjsj'
      }, {
        name: '检查结果',
        value: 'fAjjl',
        key: 'fAjjl',
        type: 'tag',
        bgColor: '#E6F7F7',
        color: '#00AEAA',
        borderColor: "#E6F7F7"
      }, {
        name: '整改时间',
        value: 'FWxsj',
      }, {
        name: '检查情况',
        value: '液化石没气钢瓶',
        key: 'fAjjl'
      }, {
        name: '检查意见',
        value: 'FWxjgbz',
      }],
      imgParams: {
        czgImg: [],
        khqmImg: [],
        xctpImgList: []
      }
    };
  },
  async onLoad(options) {
    console.log('打印options', options)
    if (options.id) {
      await this.getDetailInfo(options.id);

    }
  },
  methods: {
    async getDetailInfo(id) {
      let that = this;
      let result = await this.$api.securityCheckApi.getMyselfAjDetail(id);
      let {code, value} = result;
      if (code == 200) {
        let {aj} = value;
        console.log("安检", value);
        this.list = this.$assignValues(aj, this.list);
        this.list.map((item) => {
          if (item.name == '整改时间' && !aj.FWxsj) {
            item.value = '无'
          }
          if (item.name == '检查意见' && !aj.FWxjgbz) {
            item.value = '无'
          }
          // if (item.name == '整改时间' || item.name == '检查意见') {
          // 	item.value = '无'
          // }
        })
        let fxczpJson = aj.fXcpz;
        let xcImgList = JSON.parse(fxczpJson);
        xcImgList.map(async (item, index) => {
          let url = await that.$getPhotoUrl(item.response.fileId);
          this.imgParams.xctpImgList.push({
            url: url,
            fileId: item.response.fileId
          })
        })
        console.log('打印imgList', that.imgParams.xctpImgList);

        let czgqmImg = JSON.parse(aj.fCzgqm);
        let czgurl = await this.$getPhotoUrl(czgqmImg[0].response.fileId);
        this.imgParams.czgImg.push({
          url: czgurl,
        })

        let khqmImg = JSON.parse(aj.fKhqm);
        let khurl = await this.$getPhotoUrl(khqmImg[0].response.fileId);
        this.imgParams.khqmImg = [{
          url: khurl
        }]
      }
    },
    goToAppPage() {

    },
    //预览图片
    handlePreview(url, index) {
      // console.log(url);
      this.$previewPicture(url, index);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 10px;
}

.checkCardCss {
  margin: 10px;
}

.photoCardCss {
  margin: 10px;
}

.operationCardCss {
  margin: 10px;

  ::v-deep uni-image > div,
  uni-image > img {
    background-size: 100px !important;
  }
}

.userCardCss {
  margin: 10px;

  ::v-deep uni-image > div,
  uni-image > img {
    background-size: 100px !important;
  }
}
</style>