<template>
  <div class="app-container">
    <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="deptIds" style="width: 203px"></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="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="datetimeRangeChange">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="媒体类型" prop="objectType">
            <el-select
              v-model="queryParams.objectType"
              clearable
              placeholder="请选择品牌"
              style="width: 203px">
              <el-option
                v-for="item in mediaTypeOptions"
                :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="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="storeName">
            <el-input
              v-model="queryParams.storeName"
              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="chainName">
            <el-input
              style="width: 203px"
              v-model="queryParams.chainName"
              placeholder="请输入经销商名称"
              clearable
              @input="onInput()" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店类型" prop="storeCategory">
            <el-select
              v-model="queryParams.storeCategory"
              clearable
              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="photoType">
            <el-select
              v-model="queryParams.photoType"
              placeholder="请选择照片类型"
              style="width: 203px">
              <el-option label="拜访照" :value="2"> </el-option>
              <el-option label="标准店招" :value="1"> </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="mediaTypeFormater(item)" placement="top-start">
                  <div class="items"><span>媒体类型：</span>{{ mediaTypeFormater(item) }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.storeName" placement="top-start">
                  <div class="items">
                    <span>门店名称：</span>
                    {{ item.storeName }}
                  </div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.userName" placement="top-start">
                  <div class="items"><span>销售员：</span>{{ item.userName }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.shootTime" placement="top-start">
                  <div class="items"><span>拍摄日期：</span>{{ item.shootTime }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.deptName" placement="top-start">
                  <div class="items"><span>组织架构：</span>{{ item.deptName }}</div>
                </el-tooltip>
              </div>
              <div class="info">
                <el-tooltip :content="item.chainName" placement="top-start">
                  <div class="items"><span>经销商名称：</span>{{ item.chainName }}</div>
                </el-tooltip>
              </div>
              <!--            <div class="info"><span>描述：</span>{{item.remark}}</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 { listMedia, packImg } from '@/api/sfa/media';
import tree from '@/views/components/sfa/treeselectParent';
import user from '@/views/components/sfa/user';
export default {
  name: 'Media',
  components: { tree, user },
  data() {
    return {
      // 查询参数
      queryParams: {
        code: null,
        name: null,
        brandCode: null,
        spec: null,
        level1: null,
        storeCode: '',
        isValid: null,
        deptIds: [],
        userId: null,
        datetimerange: [],
        pageNum: 1,
        pageSize: 30,
        qualifiedState: null, //是否合格： 0:不合格，1:合格
        photoType: 2, //照片类型：1：建店照 2：拜访照
        unqualifiedReason: null,
      },
      total: 0,
      deptIds: [],
      mediaTypeOptions: [],
      mediaType: '',
      imgList: [],
      previewsrcList: [],
      storeTypeOptions: [],
      showSearch: true,
      rules: {
        datetimerange: [{ required: true, message: '请选择起止时间', trigger: 'change' }],
        photoType: [{ required: true, message: '请选择照片类型', trigger: 'change' }],
      },
      loading: false,
      isUnqualifiedReason: false,
      unqualifiedReasonOptions: [],
    };
  },
  watch: {
    'queryParams.qualifiedState': {
      handler(val) {
        if (val === 0) {
          this.isUnqualifiedReason = true;
        } else {
          this.isUnqualifiedReason = false;
          this.queryParams.unqualifiedReason = null;
        }
      },
      immediate: true,
    },
  },
  created() {
    // 是否
    this.getDicts('is_not').then((response) => {
      this.isNotOptions = response.data;
    });
    // 层次一
    this.getDicts('sfa_level1').then((response) => {
      this.level1Options = response.data;
    });
    // 品牌
    this.getDicts('sfa_product_brand').then((response) => {
      this.brandIdOptions = response.data;
    });
    // 媒体类型
    this.getDicts('sfa_task_photo_type').then((response) => {
      this.mediaTypeOptions = 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.queryParams.datetimerange[0] = this.dateInit();
    this.queryParams.datetimerange[1] = this.dateInit();
    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 {
        objectType,
        storeCode,
        storeName,
        userId,
        chainName,
        storeCategory,
        pageSize,
        pageNum,
        qualifiedState,
        photoType,
        unqualifiedReason,
      } = this.queryParams;
      let queryParams = {
        objectType,
        storeCode,
        storeName,
        userId,
        chainName,
        storeCategory,
        pageSize,
        pageNum,
        qualifiedState,
        photoType,
        unqualifiedReason,
      };
      queryParams.deptIds = this.deptIds.join(',');
      queryParams.startTime = this.queryParams.datetimerange[0];
      queryParams.stopTime = this.queryParams.datetimerange[1];
      listMedia(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.deptIds = val;
    },
    userIdFn(val) {
      this.queryParams.userId = val;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.getList();
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    datetimeRangeChange(val) {},
    mediaTypeFormater(row) {
      return this.selectDictLabel(this.mediaTypeOptions, row.objectType);
    },
    handleExport() {
      let queryParams = this.queryParams;
      queryParams.deptIds = this.deptIds.join(',');
      queryParams.startTime = this.queryParams.datetimerange[0];
      queryParams.stopTime = this.queryParams.datetimerange[1];
      packImg(queryParams).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess(response.msg);
        }
      });
    },
  },
};
</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;
    }
    .items {
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
<style lang="scss">
.mediaQueryForm .el-form-item {
  height: 29px;
}
</style>
