<template>
  <div class="directional-list">
    <Search :config="searchConfig" v-model="searchData">
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="initData"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh"
        size="small"
        @click="initData('reset')"
        >刷新</el-button
      >
      <el-button icon="el-icon-plus" size="small" @click="goAddPage"
        >新增</el-button
      >
    </Search>
    <div class="directional-content">
      <el-table
        :data="tabList"
        style="width: 100%"
        :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }"
      >
        <el-table-column prop="productId" label="统一编码" align="center">
        </el-table-column>
        <el-table-column prop="productName" label="集约产品名称" align="center">
        </el-table-column>
        <el-table-column prop="spid" label="SPID" align="center">
        </el-table-column>
        <el-table-column prop="cpid" label="CPID" align="center">
        </el-table-column>
        <el-table-column prop="cptype" label="产品分类" align="center">
          <template slot-scope="scope">
            {{ scope.row.cptype | classify }}
          </template>
        </el-table-column>
        <el-table-column
          prop="productStatus"
          label="产品状态"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            {{ scope.row.productStatus | cpTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="startdate" label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.startdate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="creater" label="操作人" align="center">
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="editPage(scope.row.id, 'view')"
              >查看</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="editPage(scope.row.id, 'edit')"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="directional-footer">
      <el-pagination
        :current-page="pagination.pageNum"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        layout="total, sizes, pager"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import Search from "@/views/directional/components/Search.vue";
import { productList } from "@/api/directional";
import { Message } from "element-ui";
import { statusDataType, cpType, statusType } from "./editConfig";
export default {
  name: "DirectionalList",
  components: {
    Search,
  },
  data() {
    return {
      // 搜索条件
      searchData: {
        spName: "",
        productName: "",
        spId: "",
        cpId: "",
        cpType: "",
        productId: "",
        productStatus: "",
        planStatus: "",
        createTime: "",
      },
      searchConfig: [
        {
          title: "集约产品名称",
          key: "productName",
          type: "String",
          placeholder: "请输入集约产品名称",
        },
        {
          title: "SPID",
          key: "spId",
          type: "String",
          placeholder: "请输入SPID",
        },
        {
          title: "CPID",
          key: "cpId",
          type: "String",
          placeholder: "请输入CPID",
        },
        {
          title: "产品分类",
          key: "cpType",
          type: "select",
          placeholder: "请选择产品分类",
          option: cpType,
        },

        {
          title: "统一编码",
          key: "productId",
          type: "String",
          placeholder: "请输入统一编码",
        },
        {
          title: "产品状态",
          key: "productStatus",
          type: "select",
          placeholder: "请选择状态",
          option: statusType,
        },
        // {
        //   title: "进度状态",
        //   key: "planStatus",
        //   type: "select",
        //   placeholder: "请选择进度状态",
        //   option: statusDataType,
        // },
        {
          title: "创建时间",
          key: "createTime",
          type: "date",
          placeholder: "请选择时间",
          config: {
            type: "daterange",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
            valueFormat: "yyyy-MM-dd",
            rangeSeparator: "至",
          },
        },
      ],
      // 列表
      tabList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 50, 100, 300],
      },
    };
  },
  methods: {
    goAddPage() {
      this.$router.push({
        path: "/directional/directionalAdd",
      });
    },
    async initData(type) {
      if (type == "reset") {
        this.reSet();
      }
      let { createTime } = this.searchData;
      if (createTime == null || createTime.length == 0 || createTime == "") {
        createTime = ["", ""];
      }
      let { pageNum, pageSize } = this.pagination;
      let { data, code } = await productList({
        ...this.searchData,
        pageNum,
        pageSize,
        endTime: createTime[0],
        beginTime: createTime[1],
      });

      if (code == 10000) {
        this.tabList = data.records;
        this.pagination.total = data.total;
      }
    },
    reSet() {
      this.searchData.productName = "";
      this.searchData.spId = "";
      this.searchData.cpId = "";
      this.searchData.cpType = "";
      this.searchData.productId = "";
      this.searchData.productStatus = "";
      this.searchData.planStatus = "";
      this.searchData.createTime = "";
      this.pagination.pageNum = 1;
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.initData();
    },
    editPage(id, type) {
      if (type == "view") {
        this.$router.push({
          path: "/directional/directionalDetail",
          query: {
            id: id,
          },
        });
      } else if (type == "add") {
        this.$router.push({
          path: "/directional/directionalAdd",
        });
      } else {
        this.$router.push({
          path: "/directional/directionalEdit",
          query: {
            id: id,
          },
        });
      }
    },
    // 改变状态
    planStatusChange(row) {
      // console.log(row);
    },
  },
  filters: {
    formatDate(time) {
      return time;
    },
    planstateFilter(val) {
      if (val == null) {
        return "待完善";
      } else {
        return statusDataType.find((item) => item.value == val).label;
      }
    },
    classify(val) {
      return cpType.find((item) => item.value == val).label;
    },
    cpTypeFilter(val) {
      if (val == "0" || val == 0) {
        return "生效";
      } else {
        return "失效";
      }
    },
  },
  created() {
    this.initData();
  },
};
</script>
<style scoped lang="scss">
.directional-list {
  padding: 20px;
  .directional-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
