<template>
  <view class="view-container">
    <view class="box detail">
      <text class="wd-font-800 wd-text-16" style="margin-bottom: 4px">
        {{ detail.title }}
      </text>
      <view class="tagList">
        <view
          v-for="(tag, index) in detail.tagList"
          :key="index"
          class="tag"
        >
          {{ tag }}
        </view>
      </view>
      <view
        class="wd-flex wd-text-13"
        style="justify-content: space-between"
      >
        <view class="wd-flex" style="align-items: center; gap: 4px">
          <u-icon name="calendar" color="#17C653" />
          <text class="wd-text-13 wd-ml-4px wd-font-800">
            {{
              `${$util.formatDate(
                detail.startDate,
                'YYYY/M/D'
              )} 至 ${$util.formatDate(detail.endDate, 'YYYY/M/D')}`
            }}
          </text>
        </view>
      </view>
      <view
        style="
          font-size: 13px;
          line-height: 160%;
          position: relative;
          transform: 0.2s all;
        "
        v-if="detail.description.length < 20"
      >
        {{ detail.description }}
      </view>
      <view
        v-else
        style="
          font-size: 13px;
          line-height: 160%;
          position: relative;
          transform: 0.2s all;
        "
        @tap="isShowAllText = !isShowAllText"
      >
        {{
          isShowAllText
            ? detail.description
            : `${detail.description.slice(1, 20)}...`
        }}
        <text style="color: #17c653; padding-left: 4px">
          {{ isShowAllText ? '收起' : '展开' }}
        </text>
      </view>

      <view
        class="wd-flex wd-items-center enterprise"
        @tap="goEnterprise(detail.enterprise)"
      >
        <u-avatar
          :src="detail.enterprise.files[0].url"
          shape="square"
          size="64"
        ></u-avatar>
        <view class="wd-flex wd-flex-col" style="gap: 4px">
          <text class="wd-font-800 wd-text-15">
            {{ detail.enterprise.enterprisesName }}
          </text>
          <view
            class="wd-flex wd-pb-8px"
            @tap.native.stop="viewPosition(detail.enterprise)"
          >
            <u-icon name="map" size="14" color="#17C653"></u-icon>
            <text class="address wd-text-12" style="margin-left: 4px">
              {{ detail.enterprise.address }}
            </text>
          </view>
          <view class="tagList">
            <view
              class="tag"
              v-for="(tag, index) in detail.enterprise.tagList"
              :key="index"
            >
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
      <view class="audit">
        <cs-dict-tag
          :dict="dictMap.task_state"
          :value="detail.status"
        ></cs-dict-tag>
      </view>
    </view>

    <view class="box record">
      <view class="wd-text-14 wd-font-800 wd-pb-12">结果反馈</view>
      <view class="row" v-for="item in list" :key="item.id">
        <view style="margin-bottom: 12px">
          <text
            :style="{
              marginRight: '10px',
              fontWeight: 'bold',
              color: setColor(item.status)
            }"
          >
            {{
              $dict.echoDicValue(dictMap.Inspections_status, item.status)
            }}
          </text>
          <text>
            {{ $util.formatDate(item.createTime, 'YYYY/M/D h:m') }}
          </text>
        </view>
        <scroll-view scroll-x="true" enable-flex="true">
          <view
            class="row"
            v-for="people in item.userList"
            :key="people.userId"
            style="display: inline-flex; gap: 12px; margin-right: 12px"
          >
            <u-avatar
              :src="people.avtar"
              size="40px"
              shape="circle"
            ></u-avatar>
            <view class="wd-flex wd-flex-col" style="gap: 2px">
              <text>{{ people.realName }}</text>
              <text>{{ people.deptName }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="emty" v-if="list.length == 0">
        <image
          class="image"
          src="/static/images/emty.png"
          mode="aspectFill"
        ></image>
        <text class="wd-text-14" style="color: #99a1b7">暂无处理结果</text>
      </view>
      <view class="audit">
        <cs-dict-tag
          :dict="dictMap.Inspections_status"
          :value="inspectionsState"
          color="#fff"
          :bgColor="setColor(inspectionsState)"
        ></cs-dict-tag>
      </view>
    </view>

    <cs-bottom-wrapper>
      <view class="" v-if="[null, 3].includes(inspectionsState)">
        <view class="btn green" @tap="locate">执法签到</view>
      </view>
      <view class="operation" v-else-if="inspectionsState == 1">
        <view class="btn red" @tap="tackle(3)">整改处理</view>
        <view class="btn green" @tap="tackle(2)">审批通过</view>
      </view>
      <view class="operation" v-else>
        <view class="btn grey">任务完成</view>
      </view>
    </cs-bottom-wrapper>
  </view>
</template>

<script>
import { getDeptTree, getDictBatchByType } from '@/api/system/dict.js'
import { TaskApi } from '@/api/task/index.js'
import { getEnterPrise } from '@/api/enterprise/index.js'
import { InspectionsApi } from '../../api/inspections'
export default {
  data() {
    return {
      dictMap: {},
      // 任务详情
      detail: {
        id: '',
        description: ''
      },
      // 是否展开文本
      isShowAllText: false,
      // 查询条件
      queryParams: {
        taskId: '',
        recordId: '',
        enterpriseId: ''
      },
      list: [],
      inspectionsState: null
    }
  },
  onLoad(res) {
    this.queryParams.taskId = res.taskId
    this.queryParams.recordId = res.recordId
    this.queryParams.enterpriseId = res.enterpriseId
    this.getDict()
    this.init()
  },
  onShow() {
    this.init()
  },
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['Inspections_status', 'task_state'].join(',')
      })
      const dept = await getDeptTree()
      this.dictMap = {
        ...dict.data,
        dept: dept.data
      }
    },
    async init() {
      const res = await TaskApi.getDetail(this.queryParams.taskId)
      const enterprise = await getEnterPrise(this.queryParams.enterpriseId)
      this.detail = {
        ...res.data,
        enterprise: enterprise.data
      }
      const feedBack = await InspectionsApi.getFeedBack(
        this.queryParams.recordId
      )

      this.list = feedBack.data.list
      this.inspectionsState = this.list[0].status
    },
    goEnterprise(enterprise) {
      uni.navigateTo({
        url: `/sub/enterprise/detail?id=${enterprise.id}`
      })
    },
    viewPosition(enterprise) {
      const position = enterprise.gpsLocation
        .split(',')
        .map(i => Number(i))
      this.$util.viewPosition({
        lat: position[0],
        lng: position[1],
        name: enterprise.address
      })
    },
    locate() {
      uni.navigateTo({
        url: `/sub/task/locate?inspectionsId=${this.queryParams.recordId}&enterpriseId=${this.queryParams.enterpriseId}`
      })
    },
    setColor(status) {
      if (status == 1) return '#F6B100'
      if (status == 3) return '#F8285A'
    },
    tackle(state) {
      uni.navigateTo({
        url: `/sub/task/enforce?state=${state}&inspectionsId=${this.queryParams.recordId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  height: 100vh;
  padding: 12px;
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  position: relative;
  .box {
    background-color: #fff;
    border-radius: $cs-border-radius;
    padding: 16px;
  }
  .row {
    border-radius: $cs-border-radius;
    padding: 12px;
    border: 1px solid #f9f9f9;
  }
  .detail {
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
    position: relative;
    overflow: hidden;
    .tagList {
      display: flex;
      align-items: center;
      gap: var(--Number-4px, 4px);
      .tag {
        display: flex;
        padding: var(--Number-2px, 2px) var(--Number-6px, 6px);
        justify-content: center;
        align-items: center;
        gap: var(--Number-4px, 4px);
        border-radius: var(--Number-2px, 2px);
        background: var(--LightMode-Grey-Grey-100, #f9f9f9);
        color: var(--LightMode-Grey-Grey-600, #78829d);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .enterprise {
      border: 1px solid #f9f9f9;
      padding: 12px;
      border-radius: $cs-border-radius;
      gap: 12px;
      position: relative;
      overflow: hidden;
      font-size: 12px;
      .address {
        color: $uni-text-color-grey;
        text-decoration: underline;
      }
      &:active {
        background-color: $cs-color-touch;
      }
      .tagList {
        margin-top: 8px;
        display: flex;
        gap: 4px;
        color: $uni-text-color-grey;
        display: flex;
        .tag {
          font-size: 12px;
          display: flex;
          padding: 2px 6px;
          justify-content: center;
          align-items: center;
          border-radius: 2px;
          background: #f9f9f9;
        }
      }
      .audit {
        position: absolute;
        right: -19px;
        top: 6px;
        transform: rotateZ(45deg);
        transform-origin: 50% 50%;
        padding: 4px 20px;
        font-size: 12px;
        text-align: center;
      }
    }
    .audit {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(23px) translateY(16px) rotateZ(45deg);
      transform-origin: 50% 50%;
    }
  }

  .record {
    position: relative;
    overflow: hidden;
    .emty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      border-radius: var(--Number-8px, 8px);
      border: 1px solid var(--LightMode-Grey-Grey-100, #f9f9f9);
      padding: 24px 12px;
      border-radius: 8px;
      .image {
        width: 64px;
        height: 64px;
      }
    }
    .audit {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(30px) translateY(8px) rotateZ(45deg);
      transform-origin: 50% 50%;
    }
  }

  .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;
    }
    .red {
      background-color: #f8285a;
      color: #fff;
    }
    .grey {
      background-color: #f1f1f4;
      color: #99a1b7;
    }
  }
}
</style>