<template>
  <div class="app-container identify">
    <el-form
      class="mediaQueryForm"
      :model="queryParams"
      ref="queryForm"
      size="mini"
      :inline="true"
      label-width="90px"
      v-show="showSearch"
      :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item class="treeselectForm treeselectForm2" label="组织架构" prop="deptIds">
            <tree
              @treeselectFn="treeselectFn"
              :treeval="queryParams.deptIds"
              :ismultiple="true"
              style="width: 193px"></tree>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="识别时间" prop="datetimerange">
            <el-date-picker
              style="width: 203px"
              v-model="queryParams.datetimerange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
              @change="datetimeRangeChange">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店编码" prop="storeCode">
            <el-input
              v-model="queryParams.storeCode"
              placeholder="请输入门店编码"
              clearable
              style="width: 203px"
              @input="onInput()" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售员" prop="userId">
            <user
              :userId="queryParams.userId"
              :orgIds="deptIds"
              @userIdFn="userIdFn"
              style="width: 203px"></user>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店类型" prop="storeCategorys">
            <el-select
              v-model="queryParams.storeCategorys"
              clearable
              multiple
              collapse-tags
              placeholder="请选择门店类型"
              style="width: 203px">
              <el-option
                v-for="item in storeTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否合格" prop="qualifiedState">
            <el-select
              v-model="queryParams.qualifiedState"
              clearable
              placeholder="请选择照片是否合格"
              style="width: 203px">
              <el-option label="合格" :value="1"> </el-option>
              <el-option label="不合格" :value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isUnqualifiedReason">
          <el-form-item label="不合格原因" prop="unqualifiedReason">
            <el-select
              v-model="queryParams.unqualifiedReason"
              clearable
              placeholder="请选择不合格原因"
              style="width: 203px">
              <el-option
                v-for="item in unqualifiedReasonOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否作弊" prop="cheatState">
            <el-select
              v-model="queryParams.cheatState"
              clearable
              placeholder="请选择照片是否作弊"
              style="width: 203px">
              <el-option label="作弊" :value="1"> </el-option>
              <el-option label="未作弊" :value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isCheatType">
          <el-form-item label="作弊类型" prop="cheatType">
            <el-select
              v-model="queryParams.cheatType"
              clearable
              placeholder="请选择作弊类型"
              style="width: 203px">
              <el-option
                v-for="item in cheatTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="照片类型" prop="photoSource">
            <el-select
              v-model="queryParams.photoSource"
              clearable
              placeholder="请选择照片类型"
              style="width: 203px">
              <el-option label="建店照" :value="1"> </el-option>
              <el-option label="拜访照" :value="2"> </el-option>
              <el-option label="拜访调色机" :value="3"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否选用" prop="isUse">
            <el-select
              v-model="queryParams.isUse"
              clearable
              placeholder="请选择是否选用"
              style="width: 203px">
              <el-option label="未使用" :value="0"> </el-option>
              <el-option label="使用" :value="1"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否019店" prop="is019">
            <el-select
              v-model="queryParams.is019"
              clearable
              placeholder="请选择是否为019店"
              style="width: 203px">
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">
          导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div v-loading="loading" element-loading-text="查询中...">
      <el-row :gutter="10" v-show="imgList.length > 0">
        <el-col :span="4" v-for="(item, index) in imgList" :key="index">
          <el-card class="imgCard" :body-style="{ padding: '0px' }">
            <el-image
              style="width: 100%; height: 200px"
              :src="item.fileUrl"
              :preview-src-list="previewsrcList">
            </el-image>
            <div style="padding: 14px">
              <div class="info">
                <el-tooltip :content="item.nickName" placement="top-start">
                  <div><span>拜访人：</span>{{ item.nickName }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="photoSourceFormater(item)" placement="top-start">
                  <div><span>识别目的：</span>{{ photoSourceFormater(item) }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="qualifiedStateFormater(item)" placement="top-start">
                  <div>
                    <span>识别结果：</span>
                    {{ item.isPass }}
                  </div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.responseConsumeTime + ''" placement="top-start">
                  <div><span>识别耗时：</span>{{ item.responseConsumeTime }}s</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.identifyNum + ''" placement="top-start">
                  <div><span>识别次数：</span>{{ item.identifyNum }}次</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.failReason" placement="top-start">
                  <div><span>失败原因：</span>{{ item.failReason }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="isUseFormater(item)" placement="top-start">
                  <div><span>是否选用：</span>{{ isUseFormater(item) }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.requestTime" placement="top-start">
                  <div><span>识别时间：</span>{{ item.requestTime }}</div>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-show="imgList.length <= 0">
        <el-empty :image-size="200"></el-empty>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { list, exportImg } from '@/api/sfa/identify';
import tree from '@/views/components/sfa/treeselectParent';
import user from '@/views/components/sfa/user';
export default {
  name: 'Media',
  components: { tree, user },
  data() {
    return {
      // 查询参数
      queryParams: {
        storeCode: '', //	string	门店编码
        storeCategorys: [], //	string	门店类型
        userId: '', //	int	业务员id
        photoSource: '', //	int	图片识别类型：1：建店店招 2：拜访店招 3：拜访调色机
        qualifiedState: '', //	string	是否合格(0:不合格，1:合格)
        unqualifiedReason: '', //	string	不合格原因：对应tj_ungualified_reason字典
        cheatState: '', //	string	是否作弊(0:不合格，1:合格)
        cheatType: '', //	string	不合格原因：对应tj_cheat_type字典
        requestTime: '', //	string	识别开始时间，yyyy-MM-dd HH:mm:ss格式
        responseTime: '', //	string	识别结束时间，yyyy-MM-dd HH:mm:ss格式
        isUse: '', //	string	是否选用：0-未使用 1-使用
        is019: '',
        isPass: '',
        pageNum: 1,
        pageSize: 30,
        datetimerange: [],
        deptIds: null,
      },
      total: 0,
      deptIds: [],
      mediaType: '',
      imgList: [],
      previewsrcList: [],
      storeTypeOptions: [],
      showSearch: true,
      rules: {
        datetimerange: [{ required: true, message: '请选择起止时间', trigger: 'change' }],
      },
      loading: false,
      isUnqualifiedReason: false,
      isCheatType: false,
      unqualifiedReasonOptions: [],
      cheatTypeOptions: [],
    };
  },
  watch: {
    'queryParams.qualifiedState': {
      handler(val) {
        if (val === 0) {
          this.isUnqualifiedReason = true;
        } else {
          this.isUnqualifiedReason = false;
          this.queryParams.unqualifiedReason = null;
        }
      },
      immediate: true,
    },
    'queryParams.cheatState': {
      handler(val) {
        if (val === 1) {
          this.isCheatType = true;
        } else {
          this.isCheatType = false;
          this.queryParams.cheatType = null;
        }
      },
      immediate: true,
    },
  },
  created() {
    // 是否
    this.getDicts('is_not').then((response) => {
      this.isNotOptions = response.data;
    });
    // 门店类型
    if (this.$store.state.user.type == '2') {
      this.getDicts('ysl_store_type').then((response) => {
        this.storeTypeOptions = response.data;
      });
    } else {
      this.getDicts('sfa_store_type').then((response) => {
        this.storeTypeOptions = response.data;
      });
    }
    // 图片识别不合格原因
    this.getDicts('tj_ungualified_reason').then((response) => {
      this.unqualifiedReasonOptions = response.data;
    });
    // 图片作弊类型
    this.getDicts('tj_cheat_type').then((response) => {
      this.cheatTypeOptions = response.data;
    });
    this.queryParams.datetimerange[0] = this.dateInit() + ' ' + '00:00:00';
    this.queryParams.datetimerange[1] = this.dateInit() + ' ' + '23:59:59';
    this.getList();
  },
  methods: {
    dateInit() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      let nowDate = year + '-' + month + '-' + day;
      return nowDate;
    },
    onInput() {
      this.$forceUpdate();
    },
    /** 查询产品信息列表 */
    getList() {
      this.loading = true;
      this.previewsrcList = [];
      let {
        storeCode,
        storeCategorys,
        userId,
        photoSource,
        qualifiedState,
        unqualifiedReason,
        cheatState,
        cheatType,
        isUse,
        is019,
        isPass,
        pageNum,
        pageSize,
        deptIds,
      } = this.queryParams;
      let queryParams = {
        storeCode,
        storeCategorys,
        userId,
        photoSource,
        qualifiedState,
        unqualifiedReason,
        cheatState,
        cheatType,
        isPass,
        isUse,
        is019,
        pageNum,
        pageSize,
        deptIds,
      };
      //   queryParams.deptIds = this.deptIds.join(',');
      queryParams.unqualifiedReason =
        this.queryParams.unqualifiedReason == null ? '' : this.queryParams.unqualifiedReason;
      queryParams.userId = this.queryParams.userId == null ? '' : this.queryParams.userId;
      queryParams.requestTime = this.queryParams.datetimerange[0];
      queryParams.responseTime = this.queryParams.datetimerange[1];
      list(queryParams).then((response) => {
        this.loading = false;
        this.imgList = response.rows;
        this.total = response.total;
        this.imgList.forEach((item, index) => {
          item.fileUrl = item.fileUrl;
          this.previewsrcList.push(item.fileUrl);
        });
      });
    },
    treeselectFn(val) {
      this.queryParams.deptIds = val;
    },
    userIdFn(val) {
      this.queryParams.userId = val;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.getList();
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.queryParams.deptIds = [];
      this.handleQuery();
    },
    datetimeRangeChange(val) {},
    handleExport() {
      let queryParams = this.queryParams;
      queryParams.unqualifiedReason =
        this.queryParams.unqualifiedReason == null ? '' : this.queryParams.unqualifiedReason;
      queryParams.userId = this.queryParams.userId == null ? '' : this.queryParams.userId;
      queryParams.requestTime = this.queryParams.datetimerange[0];
      queryParams.responseTime = this.queryParams.datetimerange[1];
      this.download(
        'sfa/identify/export',
        {
          ...queryParams,
        },
        `图片识别日志-${new Date().getTime()}.xlsx`
      );
    },
    // 识别目的字段转换字符串
    photoSourceFormater(obj) {
      let str = '';
      switch (obj.photoSource) {
        case 1:
          str = '建店店招';
          break;
        case 2:
          str = '拜访店招';
          break;
        default:
          str = '拜访调色机';
          break;
      }
      return str;
    },
    // 是否合格字段转换字符串
    qualifiedStateFormater(obj) {
      let str = '';
      switch (obj.qualifiedState) {
        case '1':
          str = '合格';
          break;
        default:
          str = '不合格';
          break;
      }
      return str;
    },
    // 是否选用字段转换字符串
    isUseFormater(obj) {
      let str = '';
      switch (obj.isUse) {
        case '1':
          str = '使用';
          break;
        default:
          str = '未使用';
          break;
      }
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
.imgCard {
  margin-top: 10px;
  .info {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    span {
      font-weight: bold;
    }
  }
}
</style>
<style lang="scss">
.mediaQueryForm .el-form-item {
  height: 29px;
}
.identify {
  .imageFile {
    width: 100px !important;
    height: 100px !important;
  }
}
</style>
