<template>
  <div id="goods">
    <template v-if="view === 'list'">
      <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>
        <data-search :fields="searchFields" v-model="searchInfo" @query="search"> </data-search>
        <data-btn :fields="btnList" @add="toAdd"></data-btn>
        <data-table
          ref="dataTable"
          :fields="fields"
          :opera="opera"
          :data="list"
          :total="total"
          @query="search"
          @cash="toCash"
          @manage="toManage"
          @edit="toEdit"
          @del="toDel"
        ></data-table>
      </el-col>
    </template>
    <template v-else-if="view == 'info'">
      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="mini" @click="toBackList()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #cut>
              <el-col :span="3"> <el-input v-model="form.cut" type="number" placeholder="请输入抽成比例"></el-input></el-col>
              <el-col :span="2" style="color: red; margin: 0 0 0 10px">%</el-col>
            </template>
          </data-form>
        </el-col>
      </el-row>
    </template>
    <shopInBill v-if="view === 'bill'" :id="id" @toBack="toBackList"></shopInBill>
  </div>
</template>

<script>
const _ = require('lodash');
import methodsUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: shop } = createNamespacedHelpers('shop');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: {
    shopInBill: () => import('./shopInBill.vue'),
  },
  data: function () {
    return {
      loadings: true,
      view: 'list',
      fields: [
        { label: '店铺编号', model: 'code' },
        { label: '店铺名称', model: 'name' },
        { label: '店主', model: 'person' },
        { label: '联系电话', model: 'phone' },
        { label: '抽成比例(%)', model: 'cut' },
        { label: '服务评分', model: 'service_score' },
        { label: '发货评分', model: 'send_score' },
        { label: '商品评分', model: 'goods_score' },
        {
          label: '店铺状态',
          model: 'status',
          format: (i) => {
            let data = this.statusList.find((f) => f.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '流水', method: 'cash' },
        { label: '账号管理', method: 'manage' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      btnList: [{ label: '添加', method: 'add' }],
      searchFields: [{ label: '店铺名称', model: 'name' }],
      searchInfo: {},
      list: [],
      total: 0,
      // info部分
      infoFields: [
        { label: '店铺名称', model: 'name' },
        { label: '店铺编号', model: 'code' },
        { label: '店铺logo', model: 'logo', type: 'upload', limit: 1, url: '/files/point/shopLogo/upload' },
        { label: '店主', model: 'person' },
        { label: '联系电话', model: 'phone' },
        { label: '地址', model: 'address' },
        { label: '证件照片', model: 'file', type: 'upload', url: '/files/point/shopFile/upload' },
        { label: '店铺二维码', model: 'qrcode', type: 'upload', url: '/files/point/shopFile/upload' },
        { label: '抽成比例', model: 'cut', custom: true },
      ],
      rules: {
        name: [{ required: true, message: '店铺名称', trigger: 'blur' }],
        code: [{ required: true, message: '店铺编号', trigger: 'blur' }],
        person: [{ required: true, message: '店铺编号', trigger: 'blur' }],
        logo: [{ required: true, message: '店主', trigger: 'change' }],
      },
      form: {},
      // 店铺状态列表
      statusList: [],
      id: '',
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...methodsUtil,
    ...dictData({ getDict: 'query' }),
    ...shop(['query', 'delete', 'fetch', 'update', 'create']),
    async search({ skip = 0, limit = this.$limit, ...others } = {}) {
      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;
    },
    initAddData() {
      const obj = { status: '1' };
      this.$set(this, 'form', obj);
    },
    toCash({ data }) {
      this.$set(this, `id`, data._id);
      this.$set(this, `view`, 'bill');
    },
    // 账号管理
    async toManage({ data }) {
      this.$router.push({ path: '/platmanag/storeAcc/detail', query: { id: data._id } });
    },
    // 修改
    async toEdit({ data }) {
      const res = await this.fetch(data._id);
      if (this.$checkRes(res)) {
        let data = res.data;
        this.$set(this, `form`, data);
        this.view = 'info';
      } else this.$message.error('未找到指定数据');
    },
    // 删除
    async toDel({ data }) {
      let res = await this.delete(data._id);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `刪除信息成功` });
        this.search();
      }
    },
    // 保存
    async toSave({ data }) {
      data.status = '1';
      let res;
      if (data.id) res = await this.update(data);
      else res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.search();
        this.toBackList();
      }
    },
    async searchOthers() {
      let res;
      res = await this.getDict({ code: 'shop_status' });
      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
    },
    toBackList() {
      this.view = 'list';
      this.form = {};
    },
  },
  computed: {
    // id() {
    //   return this.$route.query.id;
    // },
  },
};
</script>

<style lang="less" scoped>
.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>
