<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <!-- @on-load="getList" -->
        <template slot="safeStatus" slot-scope="scope">
          <span v-if="scope.row.safeStatus == 1" style="color:#00a8f3">库存充足</span>
          <span v-else-if="scope.row.safeStatus == 0" style="color:#e04046">库存不足</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="handleItem(scope.row, scope.index)"
          >详情</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-download"
            @click="exportOne(scope.row, scope.index)"
          >导出</el-button>
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary" size="small" icon="el-icon-upload2" @click="uploadRow">导入</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog :visible.sync="dialogFormVisible2" title="商品明细" width="78%" @close="itemVisible2">
      <div class="box">
        <div class="text">
          <div class="all">
            <div id="app">
              <el-form
                :model="dynamicValidateForm"
                ref="dynamicValidateForm"
                class="dynamic-table"
                label-width="0"
              >
                <el-table
                  :data="dynamicValidateForm.domains"
                  :span-method="objectSpanMethod"
                  stripe
                  border
                  fit
                  size="mini"
                >
                  <el-table-column label="商品编号" prop="goodsCode" width="100" align="center"></el-table-column>
                  <el-table-column label="位置" prop="postion" width="60" align="center"></el-table-column>
                  <!--el-table-column label="一级指标" prop="SCORE" width="80" align="center"></el-table-column-->
                  <el-table-column label="S/C" prop="content" width="80" align="center"></el-table-column>
                  <el-table-column label="(-)TC(-)" align="center">
                    <el-table-column prop="lineup1" label="0.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup2" label="0.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup3" label="0.50" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup4" label="0.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup5" label="1.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup6" label="1.25" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup7" label="1.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup8" label="1.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup9" label="2.00" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup10" label="2.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup11" label="2.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup12" label="2.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup13" label="3.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup14" label="3.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup15" label="3.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup16" label="3.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup17" label="4.00" align="center" width="60"></el-table-column>
                  </el-table-column>
                  <el-table-column prop="price" label="单价" align="center" width="60"></el-table-column>
                  <el-table-column prop="totalNum" :label="'总数'" align="center" ></el-table-column>
                </el-table>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible" title="商品明细" width="90%" @close="itemVisible">
      <div class="box">
        <div class="menu-list">
          <div
            class="total"
            :class="{active:item.id === sel}"
            v-for="item in tabs"
            :key="item.id"
            @click="select(item)"
          >{{ item.label }}</div>
        </div>

        <div class="text">
          <div class="all" v-show="sel === 'R'">
            <div id="app">
              <el-form
                :model="dynamicValidateForm"
                ref="dynamicValidateForm"
                class="dynamic-table"
                label-width="0"
              >
                <el-table
                  :data="dynamicValidateForm.domains"
                  :span-method="objectSpanMethod"
                  stripe
                  border
                  fit
                  size="mini"
                >
                  <el-table-column label="商品编号" prop="goodsCode" width="100" align="center"></el-table-column>
                  <el-table-column label="位置" prop="postion" width="60" align="center"></el-table-column>
                  <!--el-table-column label="一级指标" prop="SCORE" width="80" align="center"></el-table-column-->
                  <el-table-column label="S/C" prop="content" width="80" align="center"></el-table-column>
                  <el-table-column label="(-)TC(-)" align="center">
                    <el-table-column prop="lineup1" label="0.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup2" label="0.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup3" label="0.50" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup4" label="0.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup5" label="1.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup6" label="1.25" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup7" label="1.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup8" label="1.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup9" label="2.00" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup10" label="2.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup11" label="2.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup12" label="2.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup13" label="3.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup14" label="3.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup15" label="3.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup16" label="3.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup17" label="4.00" align="center" width="60"></el-table-column>
                  </el-table-column>
                  <el-table-column prop="price" label="单价" align="center"></el-table-column>
                  <el-table-column prop="totalNum" :label="'总数'" align="center" width="60"></el-table-column>
                </el-table>
              </el-form>
            </div>
          </div>
          <div class="all" v-show="sel === 'L'">
            <div id="appLeft">
              <el-form
                :model="dynamicValidateLeftForm"
                ref="dynamicValidateLeftForm"
                class="dynamic-table"
                label-width="0"
              >
                <el-table
                  :data="dynamicValidateLeftForm.domains"
                  :span-method="objectSpanMethod"
                  stripe
                  border
                  fit
                  size="mini"
                >
                  <el-table-column label="商品编号" prop="goodsCode" width="100" align="center"></el-table-column>
                  <el-table-column label="位置" prop="postion" width="60" align="center"></el-table-column>
                  <el-table-column label="S/C" prop="content" width="80" align="center"></el-table-column>
                  <el-table-column label="(-)TC(-)" align="center">
                    <el-table-column prop="lineup1" label="0.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup2" label="0.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup3" label="0.50" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup4" label="0.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup5" label="1.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup6" label="1.25" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup7" label="1.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup8" label="1.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup9" label="2.00" align="center" width="60"></el-table-column>

                    <el-table-column prop="lineup10" label="2.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup11" label="2.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup12" label="2.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup13" label="3.00" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup14" label="3.25" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup15" label="3.50" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup16" label="3.75" align="center" width="60"></el-table-column>
                    <el-table-column prop="lineup17" label="4.00" align="center" width="60"></el-table-column>
                  </el-table-column>
                  <el-table-column prop="price" label="单价" align="center"></el-table-column>
                  <el-table-column prop="totalNum" :label="'总数'" align="center" width="60"></el-table-column>
                </el-table>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <ModalUpload ref="modalUploadRef" @ok="getList(page.currentPage)" />
  </div>
</template>

  <!--link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
import { GnTableMixin } from "@/util/GnTableMixin";
import {
  fetchList,
  getInvgoodsinvtorydeal,
  exportStock
} from "@/api/stock/invgoodsinvtory";
import { mapGetters } from "vuex";
import ModalUpload from "./components/modalUpload";
import fileDownload from "js-file-download";
import { nowFormatTime1, nowFormatTime2 } from "@/util/GnUtils";
export default {
  name: "invgoodsinvtory1",
  mixins: [GnTableMixin],
  components: {
    ModalUpload
  },
  data() {
    return {
      sel: "R",
      tabs: [
        { label: "医学右版", num: 0, id: "R" },
        { label: "医学左版", num: 0, id: "L" }
      ],

      list: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      invtoryId: null,
      listLoading: true,
      dynamicValidateForm: {
        domains: []
      },
      dynamicValidateLeftForm: {
        domains: []
      },
      spanArr: [], //一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr的索引
      contentSpanArr: [],
      position: 0,
      tableData: [],
      goodsData: [],
      tableOption: {
        menuPosition: "center",
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        align: "center",
        searchMenuSpan: 6,
        searchSpan: 6,
        searchBtn: true,
        searchShowBtn: true,
        searchIcon: true,
        searchLabelWidth: 100,
        labelWidth: 120,
        menuWidth: 120,
        searchIndex: 3,
        submitBtn: true,
        submitText: "确定",
        menuBtn: true,
        menu: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        column: [
          {
            type: "input",
            label: "商品编号",
            prop: "goodsNo",
            span: 12,
            search: true
            // width: 180
          },
          {
            type: "input",
            label: "商品名称",
            prop: "goodsName",
            // width: 320,
            span: 12,
            search: true
          },
          {
            type: "select",
            label: "商品大类",
            prop: "goodsType",
            span: 12,
            width: 80,
            dicUrl: "/invtory/invgoodstype/getAllGoodsType", // 动态字典 接口
            props: {
              label: "goodsTypeName",
              value: "goodsTypeNo"
            },
            search: true
          },
          {
            type: "select",
            overHidden: true,
            label: "商品版本",
            prop: "goodsVersion",
            width: 80,
            span: 12,
            dicUrl: "/admin/dict/type/goods_version",
            search: true,
            rules: [
              {
                required: true,
                message: "请选择商品版本",
                trigger: "blur"
              }
            ]
          },
          {
            type: "input",
            label: "库存数量",
            prop: "invtoryQyt",
            span: 12,
            width: 80
          },
          {
            type: "select",
            label: "库存状态",
            prop: "safeStatus",
            dicUrl: "/admin/dict/type/safe_status",
            slot: true,
            span: 12,
            width: 80,
            search: true
          },

          {
            type: "input",
            label: "最后修改者",
            prop: "upteUser",
            span: 12,
            readonly: true,
            width: 100
          },
          {
            type: "input",
            label: "最后修改时间",
            prop: "upteTime",
            span: 12,
            readonly: true,
            width: 140
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permissions.generator_invgoodsinvtory_add,
          true
        ),
        delBtn: this.vaildData(
          this.permissions.generator_invgoodsinvtory_del,
          true
        ),
        editBtn: this.vaildData(
          this.permissions.generator_invgoodsinvtory_edit,
          true
        )
      };
    }
  },
  created() {
    //this.getGoodsDetailList(this.invtoryId, "R");
    this.getList();
  },
  methods: {
    itemVisible: function() {
      this.dialogFormVisible = false;
      this.goodsData = [];
    },
    itemVisible2: function() {
      this.dialogFormVisible2 = false;
      this.goodsData = [];
    },
    handleItem: function(row) {
      this.invtoryId = row.invtoryId;
      //let pstion = row.goodsVersion == "N" ? "" : "R";
      //if (pstion == "R") {
      //this.dialogFormVisible = true;
      //} else {
      //this.dialogFormVisible2 = true;
      //}
      this.dialogFormVisible2 = true;
      this.getGoodsDetailList(this.invtoryId, "");
    },

    getList(current, params) {
      this.tableLoading = true;
      if (current) {
        this.page.currentPage = current;
      }
      if (params) {
        this.searchForm = Object.assign(this.searchForm, params);
      }
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    select(item) {
      this.sel = item.id;
      this.listLoading = true;
      this.goodsData = [];
      this.getGoodsDetailList(this.invtoryId, "R");
    },
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 导入
    uploadRow() {
      this.$refs.modalUploadRef.init();
    },
    exportOne(row, index) {
      let time = nowFormatTime1();
      exportStock(row.invtoryId).then(res => {
        return fileDownload(
          res.data,
          row.goodsNo + "_" + time + "库存统计" + ".xlsx"
        );
      });
    },

    //获取列表数据
    getGoodsDetailList(invtoryId, postion) {
      this.goodsData = [];
      getInvgoodsinvtorydeal(invtoryId, postion)
        .then(response => {
          this.goodsData = response.data.data;
          this.listLoading = false;
          if (postion == "R" || postion == "")
            this.dynamicValidateForm.domains = this.goodsData || [];
          else if (postion == "L")
            this.dynamicValidateLeftForm.domains = this.goodsData || [];
          //设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
          this.spanArr = [];
          this.contentSpanArr = [];
          for (var i = 0; i < this.goodsData.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
              this.contentSpanArr.push(1);
              this.position = 0;
            } else {
              /**判断当前元素与上一个元素是否相同(第1和第2列)**/
              if (this.goodsData[i].NAME === this.goodsData[i - 1].NAME) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
              //判断当前元素与上一个元素是否相同(第3列)
              if (this.goodsData[i].SCORE === this.goodsData[i - 1].SCORE) {
                this.contentSpanArr[this.position] += 1;
                this.contentSpanArr.push(0);
              } else {
                this.contentSpanArr.push(1);
                this.position = i;
              }
            }
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
      // this.getList(this.invtoryId, this.sel);
    }
  }
};
</script>
<style scoped>
.equi_container {
  display: flex;
  flex-direction: column;
}
.menu-list {
  height: 2rem;
  width: 200px;
  display: flex;
}
.total {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*height: 100%;*/
  /*line-height: 0.44rem;*/
  background: #f4faff;
  color: #4c8fff;
  text-align: center;
  float: left;
}
.total.active {
  background: #4c8fff;
  color: #ffffff;
}
.text {
  flex: 1;
  overflow: auto;
}
</style>
