<template>
  <div class="AIImage">
    <van-nav-bar class="navBar" title="图片识别异常" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
      <van-tab title="未反馈" name="0" :disabled="disabled"></van-tab>
      <van-tab title="已反馈" name="1" :disabled="disabled"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div
          class="list_item"
          v-for="(item, index) in listData"
          :key="index"
          @click="toDetail(item)">
          <div class="storeTitle">
            <div class="storeName">{{ item.storeName }}</div>
            <div class="storeCode" style="margin-left: 5px; margin-top: 2px">
              (<span style="color: #0057ba; vertical-align: -1px">{{ item.storeCode }}</span
              >)
            </div>
          </div>
          <div class="item">
            <div class="label">门店类型：</div>
            <div class="value">{{ item.storeCategoryName }}</div>
          </div>
          <div class="item">
            <div class="label">地址：</div>
            <div class="value">{{ item.addressLine }}</div>
          </div>
          <div class="item">
            <div class="label">拜访人：</div>
            <div class="value">{{ item.visitUserNickName }}</div>
          </div>
          <div class="item">
            <div class="label">拜访时间：</div>
            <div class="value">{{ item.createTime }}</div>
          </div>
          <div class="item">
            <div class="label">拍摄类型：</div>
            <!-- 1:店招内容识别，2:门店代码识别，3:调色机识别，4:更换店招 -->
            <div class="value">{{ item.identifyType | filterType }}</div>
          </div>
          <div class="item">
            <div class="label">识别结果：</div>
            <div class="value">{{ item.unqualifiedReason }}</div>
          </div>
        </div>
        <van-empty description="暂无数据" v-if="listData.length == 0" />
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { getPhotoApproveList } from '@/api/AIImage';
export default {
  name: 'list',
  data() {
    return {
      tabVal: 0,
      disabled: false,
      listData: [],
      isLoading: false,
    };
  },
  filters: {
    filterType(val) {
      if (val == 1) {
        return '店招内容识别';
      } else if (val == 2) {
        return '门店代码识别';
      } else if (val == 3) {
        return '调色机识别';
      } else if (val == 4) {
        return '更换店招';
      }
    },
  },
  watch: {
    $route(to, from) {
      if (from.path == '/My/index') {
        this.tabVal = 0;
      }
    },
  },
  activated() {
    this.getList();
  },
  created() {},
  mounted() {},
  methods: {
    tabChange(tab) {
      this.getList();
    },
    onRefresh() {
      this.getList();
    },
    getList() {
      this.toastLoading(0, '加载中...', true);
      getPhotoApproveList({ approveState: this.tabVal }).then((res) => {
        this.toastLoading().clear();
        this.isLoading = false;
        if (res.code == 200) {
          this.listData = res.rows;
        }
      }, 1000);
    },
    // 详情
    toDetail(item) {
      this.$router.push({
        path: '/AIImageDetail',
        query: {
          photoApproveId: item.photoApproveId,
        },
      });
    },
    onClickLeft() {
      this.$router.replace({
        path: '/My',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.AIImage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    padding: 10px;
    .list_item {
      padding: 10px 16px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 10px;
      .storeTitle {
        display: flex;
        font-size: 16px;
        font-weight: bold;
        padding: 5px 0;
      }
      .item {
        display: flex;
        font-size: 13px;
        padding: 3px 0;
        color: #666;
        .label {
          /* width: 80px; */
          text-align: left;
        }
        .value {
          flex: 1;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.AIImage {
  .van-pull-refresh {
    height: 100%;
  }
  .van-tabs__wrap,
  .van-tabs__nav--card {
    margin: 0 !important;
    border-left: 0;
    border-right: 0;
    height: 40px;
  }
}
</style>
