<template>
  <div id="goods">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col :span="24" class="one"> <span>系统通知</span> </el-col>
        <el-col :span="24">
          <data-search :fields="searchFields" v-model="searchInfo" @query="search">
            <template #source>
              <el-option v-for="i in sourceList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #type>
              <el-option v-for="i in typeList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #status>
              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #source_type>
              <el-option v-for="i in source_typeList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-search>
        </el-col>
        <el-col :span="24">
          <data-table
            ref="dataTable"
            :fields="fields"
            :opera="opera"
            :data="list"
            :total="total"
            @query="search"
            @view="toView"
            @see="toSee"
            @del="toDelete"
          ></data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: shopNotice } = createNamespacedHelpers('shopNotice');
const { mapActions: dictData } = createNamespacedHelpers('dictData');

export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      loadings: true,
      loading: false,
      view: 'list',
      fields: [
        {
          label: '消息来源',
          model: 'source',
          showTip: false,
          format: (i) => {
            let data = this.sourceList.find((f) => f.value == i);
            if (data) return data.label;
            else return '';
          },
        },
        { label: '发送时间', model: 'time' },
        { label: '内容', model: 'content', showTip: false },
        {
          label: '类型',
          model: 'type',
          format: (i) => {
            let data = this.typeList.find((f) => f.value == i);
            if (data) return data.label;
            else return '';
          },
        },
        {
          label: '状态',
          model: 'status',
          format: (i) => {
            let data = this.statusList.find((f) => f.value == i);
            if (data) return data.label;
            else return '';
          },
        },
        {
          label: '来源类型',
          model: 'source_type',
          format: (i) => {
            let data = this.source_typeList.find((f) => f.value == i);
            if (data) return data.label;
            else return '';
          },
        },
      ],
      opera: [
        { label: '查看', method: 'view' },
        { label: '已读', method: 'see', confirm: true, type: 'warning', display: (i) => i.status == '0' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      btnList: [{ label: '添加', method: 'add' }],
      searchFields: [
        { label: '来源', model: 'source', type: 'select' },
        { label: '类型', model: 'type', type: 'select' },
        { label: '状态', model: 'status', type: 'select' },
        { label: '来源类型', model: 'source_type', type: 'select' },
      ],
      searchInfo: {},
      list: [],
      total: 0,
      // 来源
      sourceList: [],
      // 类型
      typeList: [],
      // 状态
      statusList: [],
      // 来源类型
      source_typeList: [],
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...dictData({ getDict: 'query' }),
    ...shopNotice(['query', 'delete', 'fetch', 'update', 'create']),
    // 查询
    async search({ skip = 0, limit = this.$limit, ...others } = {}) {
      others.shop = this.user.shop._id;
      let query = { skip, limit, ...others };
      if (Object.keys(this.searchInfo).length > 0) query = { ...query, ...this.searchInfo };
      const res = await this.query(query);
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
      this.loadings = false;
    },
    // 修改
    async toView({ data }) {
      if (data.source_type) {
        if (data.source_type == '0') this.$router.push({ path: `/selfShop/order`, query: { id: data.source_id } });
        else if (data.source_type == '1') this.$router.push({ path: `/selfShop/sales`, query: { id: data.source_id } });
        let info = { _id: data._id, status: '1' };
        let res = await this.update(info);
        if (this.$checkRes(res)) {
          this.search();
        }
      }
    },
    // 已读
    async toSee({ data }) {
      let info = { _id: data._id, status: '1' };
      let res = await this.update(info);
      if (this.$checkRes(res, '已读', `${res.errmsg}`)) this.search();
    },
    async toDelete({ data }) {
      let res = await this.delete(data._id);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `刪除信息成功` });
        this.search();
      }
    },
    // 查询其他信息
    async searchOthers() {
      // 来源
      let res = await this.getDict({ code: 'notice_source' });
      if (this.$checkRes(res)) this.$set(this, 'sourceList', res.data);
      // 类型
      res = await this.getDict({ code: 'notice_type' });
      if (this.$checkRes(res)) this.$set(this, 'typeList', res.data);
      // 状态
      res = await this.getDict({ code: 'notice_status' });
      if (this.$checkRes(res)) this.$set(this, 'statusList', res.data);
      // 来源类型
      res = await this.getDict({ code: 'notice_source_type' });
      if (this.$checkRes(res)) this.$set(this, 'source_typeList', res.data);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    margin: 0 0 10px 0;
  }
}
.el-col {
  margin: 10px 0;
}
</style>
