<template>
  <div id="index">
    <template v-if="view === 'list'">
      <el-row>
        <el-col :span="24" style="padding: 10px">
          <el-button icon="el-icon-back" size="mini" @click="backLevel()" v-if="levelList.length > 0">返回</el-button>
        </el-col>
      </el-row>
      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
        <template #status>
          <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
        </template>
      </data-search>
      <data-btn :fields="btnFields" @add="toAdd" />
      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search">
        <template #code="{ row, item }">
          <el-link type="primary" @click="toData(row)">{{ row[item.model] }}</el-link>
        </template>
      </data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :span="12" :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #status>
              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
import methodUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('goodsTags');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '显示名称', model: 'label' },
        { label: '标签编码', model: 'code', custom: true },
        { label: '状态', model: 'status', format: (i) => (i === '0' ? '使用中' : '已禁用') },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
      ],
      list: [],
      total: 0,
      limit: 20,
      btnFields: [{ label: '添加', method: 'add' }],
      defaultSearch: {},
      searchInfo: {},
      searchFields: [
        { label: '显示名称', model: 'label' },
        { label: '标签编码', model: 'code' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      infoFields: [
        { label: '显示名称', model: 'label' },
        { label: '标签编码', model: 'code' },
        { label: '标签图片', model: 'file', type: 'upload', url: '/files/point/goodstags/upload' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      rules: {},
      form: {},
      statusList: [],

      levelList: [],
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    ...dictData({ getDict: 'query' }),
    ..._.cloneDeep(methodUtil),
    //执行查询
    async search({ skip = 0, limit = this.limit || 10, ...others } = {}) {
      let query = { skip, limit, ...others };
      if (this.searchInfo && Object.keys(this.searchInfo).length > 0) query = { ...query, ...this.searchInfo };
      if (this.defaultSearch && Object.keys(this.defaultSearch).length > 0) query = { ...query, ...this.defaultSearch };
      if (this.levelList.length > 0) query.pid = _.last(this.levelList);
      const res = await this.query(query);
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async searchOthers() {
      const res = await this.getDict({ code: 'use' });
      if (this.$checkRes(res)) this.$set(this, 'statusList', res.data);
    },
    initAddData() {
      const pid = _.last(this.levelList);
      const level = this.levelList.length + 1;
      if (pid) this.form.pid = pid;
      this.form.level = level;
    },
    toData(row) {
      const id = _.get(row, '_id');
      this.levelList.push(id);
      this.search();
    },
    backLevel() {
      this.levelList.pop();
      this.search();
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
