<!--客户结算单表-->
<template>
 <div class="cr-body-content">
    <flexbox class="content-header">
      <!-- <el-button
            class="filter-item"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete()"
          >批量删除
          </el-button> -->
      <el-input
        v-model="searchContent"
        clearable
        size="small"
        placeholder="搜索..."
        style="width: 200px"
        class="search-container"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="handleFilter"
        >搜索
      </el-button>
    </flexbox>
    <!--表格渲染-->
    <el-table
      ref="multipleTable"

      class="cr-table"
      :data="tableData"
      :render-header="labelHead"
      :span-method="cellMerge"
       show-summary
      size="small"
      stripe
      border
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" label="类型" width="100" fixed>
      </el-table-column>
      <el-table-column prop="name" label="零件编号" width="150" fixed>
      </el-table-column>
      <el-table-column prop="desc" label="描述" width="180" fixed>
      </el-table-column>
       <el-table-column prop="amount2" label="总库存" width="90" fixed>
      </el-table-column>
      <el-table-column prop="amount1" label="总订单数" width="90" fixed>
      </el-table-column>
      <el-table-column prop="amount2" label="预计划合计" width="100">
      </el-table-column>
      <el-table-column
        :label="item"
        v-for="(item, index) in header"
        :key="item"
        align="center"
      >
        <template slot-scope="scope">
          <span
            v-for="(item2, index2) in scope.row.transportNumByDistance"
            :key="index2"
          >
            <div v-if="index2 == index">
              {{ scope.row.transportNumByDistance[index2].transportNum }}
            </div>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-footer">
      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
      <!-- 抽屉控件 -->
      <el-drawer
        title="信息详细页"
        size="75%"
        direction="rtl"
        :visible.sync="drawer"
        :before-close="handleDrawerClose"
      >
      </el-drawer>
    </div>
  </div>
 
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import permission from "@/directive/permission/index.js";
import moment from "moment";

export default {
  name: "SecondaryActuralAdjustmentReport",
  components: { Pagination },
  directives: { permission },
  filters: {
    IsCustomerSignFilter(status) {
      //翻译是否签字
      const statusMap = {
        true: "是",
        false: "否",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      crmType: "deliveGoods",
      header: [
        "2/1",
        "2/2",
        "2/3",
        "2/4",
        "2/5",
        "2/6",
        "2/7",
        "2/8",
        "2/9",
        "2/10",
        "2/11",
        "2/12",
      ], //动态列头header
      tableData: [
        {
          id: "保险杠",
          name: "A1568804340 9999",
          desc: "V205 AMG 前保蒙皮_无PTS",
          amount1: "234",
          amount2: "32",
          amount3: 10,
        },
        {
          id: "保险杠",
          name: "A2538850001 9999",
          amount1: "165",
          desc: "V205 AMG 前保蒙皮_PTS",
          amount2: "443",
          amount3: 12,
        },
        {
          id: "保险杠",
          name: "A2538851101 9999",
          desc: "V205 AMG 前保蒙皮_PTS&Camera（ 高配）",
          amount1: "324",
          amount2: "19",
          amount3: 9,
        },
        {
          id: "小件",
          name: "A1568859400 9999",
          desc: "X156 MOPF AMG 前保蒙皮",
          amount1: "621",
          amount2: "22",
          amount3: 17,
        },
        {
          id: "小件",
          name: "A1568803740 9999",
          desc: "X156 AMG 前保蒙皮_PTS(高配)",
          amount1: "539",
          amount2: "41",
          amount3: 15,
        },
      ],
      mergerItems: [
        { columnIndex: 0, spanArr: [], pos: 0, prop: "id" },
        { columnIndex: 1, spanArr: [], pos: 0, prop: "name" },
      ],
      rules: {
        //前端定义的规则，后端也有验证
        erpMaterialCode: [
          { required: true, message: "必须输入！", trigger: "blur" },
        ],
      },
      customerInfos: [],
      searchContent: "", // 输入内容
      drawer: false,
      form: {
        dicDetailID: "",
        customerId: "",
        projectId: "",
      },
      list: null,
      totalCount: 0,
      listLoading: true,
      formLoading: false,
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listQuery: {
        Filters: [
          {
            logic: 0,
            column: "Enabled",
            action: 0,
            value: "true",
          }, //默认查询可用的
        ],
        //OrgID:"",
        SkipCount: 0,
        MaxResultCount: 15,
      },
      page: 1,
      dialogFormVisible: false,
      multipleSelection: [],
      formTitle: "",
      drawer: false,
      showExcelImport: false,
      tableHeight: document.documentElement.clientHeight - 260,
      isEdit: false,
    };
  },
  mounted() {
    var self = this;
    window.onresize = function () {
      var offsetHei = document.documentElement.clientHeight;
      self.tableHeight = offsetHei - 190;
    };
  },
  created() {
    //this.getList();
    this.getSpanArr(this.tableData, this.mergerItems);
  },
  computed: {
    /** 列表字段 */
    getDefaultField() {
      var tempsTabs = [];
      tempsTabs.push({
        label: "预发货计划单号",
        prop: "customCode",
        width: 150,
      });
      tempsTabs.push({
        label: "预计发货日期",
        prop: "beginTime",
        width: 110,
        formType: "datetime",
      });
      tempsTabs.push({ label: "车次", prop: "customName", width: 130 });
      tempsTabs.push({ label: "零件类型", prop: "documentStatus", width: 55 });
      tempsTabs.push({ label: "发货类型", prop: "remark", width: 250 });
      return tempsTabs;
    },
  },
  methods: {
    // labelHead(h, { column, index }) {
    //   //动态表头渲染
    //   //let l = column.label.length;
    //   //let f = 12; //每个字大小,其实是每个字的比例值,大概会比字体大小打差不多大
    //   //column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
    //   //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
    //   //h即为cerateElement的简写，具体可看vue官方文档
    //   return h("span", { class: "table-head", style: { width: "100%" } }, [
    //     column.label,
    //   ]);
    // },

    // labelHead(h, { column }) {
    //   // h即为cerateElement的简写，具体可看vue官方文档
    //   return h("div", [
    //     h("span", column.label),
    //     h("i", {
    //       class: "el-icon-question",
    //     }),
    //   ]);
    // },

    labelHead(h, { column }) {
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              content: "这是一个提示",
              placement: "top",
            },
          },
          [
            h("i", {
              class: "el-icon-question",
              style: "color:#409eff;margin-left:5px;",
            }),
          ]
        ),
      ]);
    },
    cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        //这里判断第几列需要合并
        let item = this.mergerItems.find(
          (item) => item.columnIndex === columnIndex
        );
        const _row = item.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data, array) {
      //循环数据处理
      for (let n = 0; n < array.length; n++) {
        array[n].spanArr = []; //数据清空(重新调此方法的时候需要清空上一次的数据)
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            array[n].spanArr.push(1);
            array[n].pos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
              array[n].spanArr[array[n].pos] += 1;
              array[n].spanArr.push(0);
            } else {
              array[n].spanArr.push(1);
              array[n].pos = i;
            }
          }
        }
      }
    },
    //抽屉
    handleDrawerOpen(param) {
      this.drawer = true;
      var parentId = param.id; //主键id
      this.customerInfos = [
        {
          ParentId: parentId,
        },
      ];
    },
    handleDrawerClose(done) {
      done();
    },
    /** 格式化字段 */
    fieldFormatter(row, column) {
      if (column.property == "beginTime" || column.property == "endTime") {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      // if(column.property=="documentType"){
      //    return { 4: "NPA", 5: "PICK", 5: "PICK", 6: "ISS", 7: "TR", 8: "CYC", 201: "AdvanceShippingNotice", 202: "ArrivalNotice", 203: "Receipt" }[row[column.property]];
      // }
      if (column.property == "documentStatus") {
        return { 0: "新建", 1: "进行中", 5: "完成", 9: "取消" }[
          row[column.property]
        ];
      }
      return row[column.property] || "--";
    },
    importExcelData() {
      //关闭导入窗体时调用
      this.showExcelImport = false;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      this.listQuery.SkipCount = (this.page - 1) * 10;
      this.$axios
        .posts("/api/settleaccount/sec-act-adjust-report/list", this.listQuery)
        .then((response) => {
          this.list = response.items;
          //alert(JSON.stringify(response.Items))
          this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    fetchData(id) {
      //循环动态
      this.$axios
        .gets("/api/settleaccount/sec-act-adjust-report/" + id)
        .then((response) => {
          this.form = response;
        });
    },
    /** 筛选操作 */
    handleFilter() {
      this.page = 1;
      this.getList();
      this.listQuery.Filters = [];
      if (this.searchContent != "") {
        var column = "documentNumber";
        let filter = {
          logic: 0,
          column: column,
          action: 0,
          value: this.searchContent,
        };
        this.listQuery.Filters.push(filter);
      }
      this.getList();
    },
    resetQuery() {},
    handleDelete(row) {
      //批量删除
      var params = [];
      let myalert = ""; //声明变量，其变量必须在此声明后使用
      if (row) {
        //单行
        params.push(row.id);
        myalert = row.name;
      } else {
        //多选
        this.multipleSelection.forEach((element) => {
          let id = element.id;
          params.push(id);
        });
        myalert = "选中项";
      }
      this.$confirm("是否删除" + myalert + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .posts("/api/settleaccount/sec-act-adjust-report/delete", params)
            .then((response) => {
              const index = this.list.indexOf(row);
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    sortChange(data) {
      const { prop, order } = data;
      if (!prop || !order) {
        this.handleFilter();
        return;
      }
      this.listQuery.Sorting = prop + " " + order;
      this.handleFilter();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { textAlign: "left" };
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
  },
};
</script>


<style lang="scss" scoped>
@import "../../styles/crmtable.scss";
</style>

