<template>
  <el-dialog title="调整成本问题" :visible.sync="dialogVisible" width="600px" @close="cancelSubmit()">
    <div v-loading="loading">
      <div class="fr mb20">
        <el-input placeholder="输入成本" style="width:85px;margin-right:10px" v-model="banthCost" precision="2" :min="0" :max="999999.99"></el-input>
        <el-button type="primary" @click="handleCost">批量填充</el-button>
      </div>
      <el-table :data="tableData" :span-method="objectSpanMethod" border>
        <el-table-column label="颜色" prop="color" width="140px">
          <template slot-scope="scope">{{ scope.row.color }}</template>
        </el-table-column>
        <el-table-column label="尺码" prop="size" width="140px">
          <template slot-scope="scope">{{ scope.row.size }}</template>
        </el-table-column>
        <el-table-column label="成本费用">
          <template slot-scope="scope">
            <dm-input-amount width="200px" @change="changeSingleCost(scope.row.giftId, scope.row.costPrice)" v-model.trim="scope.row.costPrice" precision="2" :min="0" :max="999999.99"></dm-input-amount>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSubmit()">取消</el-button>
      <el-button type="primary" @click="submitProNanme()">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import request from '../service/request.js';
export default {
  props: {
    updateCostData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      // tableData: [],
      tableData: [
        {
          color: '红色',
          size: 'L',
          costPrice: '10',
          giftId: '1111'
        },
        {
          color: '红色',
          size: 'XL',
          costPrice: '20',
          giftId: '2222'
        },
        {
          color: '红色',
          size: 'M',
          costPrice: '30',
          giftId: '3333'
        },
        {
          color: '黑色',
          size: 'L',
          costPrice: '10',
          giftId: '4444'
        },
        {
          color: '黑色',
          size: 'M',
          costPrice: '20',
          giftId: '55555'
        }
      ],
      spanArr: [], // 用于存放每一行记录的合并数
      // costChangeObj: [], // 用于存放批量修改后的数据
      banthCost: ''
    };
  },
  mounted() {
    this.dialogVisible = true;
    this.getData();
    this.getSpanArr(this.tableData);
  },
  methods: {
    getData(){
      console.log('获取成本数据');
    },
    submitProNanme() {
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUpdateCost');
      }, 10);
    },
    // 取消修改
    cancelSubmit() {
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUpdateCost');
      }, 10);
    },
    // 合并单元格，行合并
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].color === data[i - 1].color) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        // console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0 || columnIndex === 1) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        // console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 批量修改成本
    handleCost(){
      // for (let item in this.costChangeObj) {
      //   this.costChangeObj[item].costPrice = this.banthCost;
      //   // this.costChangeObj[item].stockType = this.stockType;
      // }
      this.tableData.forEach(item => {
        item.costPrice = this.banthCost;
      });
      console.log(this.tableData);
    },
    changeSingleCost(id, cost){
      console.log(this.tableData);
    }
  }
};
</script>
<style scoped></style>
