<template lang="pug">
div.main
  div.main-top
    h2 {{$route.meta.title}}
  div.main-oper
    span.main-oper-t 样品名称:
    el-input(v-model="filterData.name" placeholder="请输入" clearable @keyup.native.enter="queryTable()")
    span.main-oper-t 样品编号:
    el-input(v-model="filterData.code" placeholder="请输入" clearable @keyup.native.enter="queryTable()")
    span.main-oper-t 客户名称:
    el-input(v-model="filterData.cus" placeholder="请输入" clearable @keyup.native.enter="queryTable()")
    div.main-oper-button
      el-button(type="primary" icon="el-icon-search" @click.stop="queryTable()") 查询
      el-button(type="warning" icon="el-icon-thumb" :disabled="canBatch" @click="handleShowDispatch()") 导出+ {{ tableSelection.length }}
  tableList.table(:props="tableHeader" :data="tableData" :paging="paginationInitial" @paginationChanged="paginationChanged" :selection.sync="tableSelection")
    template(v-slot:operate="{ scope }")
      el-button(size="mini", type="primary", @click="handleSkipDetail(scope.row)") 详情
</template>

<script>
// 宜搭参数
const USER_ID = "yida_pub_account";
const APP_TYPE = "APP_NZK8W31RRXC8TH2BPYBT";
const FROM_UUID = "FORM-FFYJVE1VBHELL1S50W6IACOS1ZYN39659Z3IKFD";

import { aliworkTheDynamicSubsidiary } from "@/modules/fushuo/service/api";
import { exportExcel } from "@/utils/export";

import mixin from "./index.mixin";

export default {
  name: "admin-system",
  mixins: [mixin],
  components: {
    tableList: () => import("@/components/table/element-ui/Universal"),
    datePick: () => import("@/components/common/element-ui/DatePick")
  },
  data() {
    return {
      // 表数据
      tableData: [],
      // 分页初始值
      paginationInitial: {
        page: 1,
        size: 10,
        total: 0
      },
      // 多选操作
      tableSelection: [],
      // 查询条件
      filterData: {
        name: "",
        code: "",
        cus: ""
      },
      // 历史参数记录: 比对参数是否变更, 重置查询页数和数据
      paramsPrevious: {}
    };
  },
  filters: {},
  computed: {
    // 是否可批量操作
    canBatch() {
      return !(this.tableSelection.length > 0);
    }
  },
  watch: {},
  methods: {
    // 查询列表
    async queryTable(noRest) {
      const res = await aliworkTheDynamicSubsidiary(this._fmtParams(noRest));
      this.tableData = res.list.map(item => {
        return {
          formInstId: item.formInstId,
          gmtCreate: item.gmtCreate,
          gmtModified: item.gmtModified,
          link: `https://www.aliwork.com/alibaba/web/${APP_TYPE}/inst/formEdit.html?formInstId=${item.formInstId}&formUuid=${FROM_UUID}`,
          title: `样品编号: ${item.formData.textField_ki2uws7m}`,
          ...item.formData
        };
      });
      this.paginationInitial.total = res.total;
    },
    // 分页变动
    paginationChanged({ page, size }) {
      this.paginationInitial.page = page;
      this.paginationInitial.size = size;
      this.queryTable(true);
    },
    // 格式化请求数据
    _fmtParams(noRest) {
      const conditionList = [];
      const fmtCondition = (
        compId,
        condition,
        iEemployee = false,
        isDate = false
      ) => {
        if (condition) {
          if (iEemployee) condition = JSON.stringify(condition);
          if (isDate) condition = JSON.stringify(condition);
          conditionList.push({
            fieldName: compId,
            value: condition
          });
        }
      };
      fmtCondition("textField_khlrd6ar", this.filterData.name); // 样品名称
      fmtCondition("textField_ki2uws7m", this.filterData.code); // 样品编号
      fmtCondition("textField_khlmcttq", this.filterData.cus); // 客户名称
      fmtCondition("textField_khls8t3x", "特化"); // 客户名称
      // 参数格式化, 统一管理查询条件
      const params = {
        appType: APP_TYPE,
        userId: USER_ID,
        formId: FROM_UUID,
        pageIndex: this.paginationInitial.page,
        pageSize: this.paginationInitial.size,
        conditionList
      };
      // 当查询条件发生变化, 重置查询页数和数据 - 忽略字段：更多方案详见 https://www.jianshu.com/p/435ea5cfa609
      if (!noRest) {
        this.tableData = [];
        this.paginationInitial.total = 0; // 查询前重置数据: 总数为0, page会置为1
        this.paginationInitial.page = 1; // 重置页数
      }
      return params;
    },
    // 跳转详情
    handleSkipDetail({ link }) {
      window.open(link);
    },
    // 批量导出
    handleShowDispatch() {
      let cols = {
        title: "样品编号",
        link: "二维码地址"
      };
      exportExcel({
        cols,
        list: this.tableSelection,
        fileName: "标签批量打印",
        bookType: "xls"
      });
    }
  },
  async created() {
    this.$store.commit("user/SET_TOKEN", "cVhNZqaqTimBB7LRBhpA"); // token授权
    this.queryTable();
  },
  async mounted() {}
};
</script>

<style scoped lang="stylus">
.main
  background-color #fff
  min-width 1080px
  padding 30px 40px
  &-top
    margin-bottom 15px
    display flex
    align-items flex-start
    h2
      border-left 5px solid SlateGray
      padding-left 10px
    .el-link
      margin-left 20px
      font-size 14px
  &-oper
    padding-bottom 15px
    display flex
    align-items center
    flex-wrap wrap
    &-t
      color $-color-theme-second
      margin-right 10px
      margin-left 20px
    &-button
      margin-left 50px
      margin-right 10px
    .el-input
      width 200px
</style>
