<template>
  <el-dialog :close-on-click-modal="false" :title="dialogConfig.title" :visible.sync="dialogConfig.setPLVisible" :width="dialogConfig.width">
    <div style="padding: 0 108px">
      <main>
        <el-form :model="addPLForm" label-width="130px">
          <div v-show="currentTab === 1">
            <el-form-item prop="aaa" label="上月营业收入">
              <el-input v-model="addPLForm.aaa" placeholder="请输入"></el-input>
            </el-form-item>

            <el-row v-for="item in addPLForm.orderGoodsList" :key="item.id">
              <el-col :span="7">
                <el-form-item label-width="130px" prop="bbb" label="商品名称">
                  <el-input v-model="item.bbb" placeholder="请输入" style="width: auto"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label-width="96px" prop="ccc" label="采购成本">
                  <el-input v-model="item.ccc" placeholder="请输入" style="width: auto"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label-width="96px" prop="ddd" label="商品定价">
                  <el-input v-model="item.ddd" placeholder="请输入" style="width: auto"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label-width="72px" prop="eee" label="毛利率">
                  <div class="merge">
                    <el-input v-model="item.eee" placeholder="请输入" style="width: auto"></el-input>
                    <el-tooltip v-if="addPLForm.orderGoodsList.length > 1" placement="top" content="删除当前商品">
                      <button @click="removeGoods(item)" class="delete-btn" type="danger"></button>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-form-item label-width="130px" prop="" label="">
                <el-button class="add-goods-btn" @click="addGoods">新增商品</el-button>
              </el-form-item>
            </el-row>

            <el-form-item prop="aaa" label="上月营业收入">
              <template #label>
                <div style="white-space: nowrap">
                  <i class="el-icon-warning-outline"></i>
                  毛利率(自动计算)
                </div>
              </template>
              <el-input v-model="addPLForm.aaa" placeholder="自动计算结果" disabled></el-input>
            </el-form-item>

            <div class="next-btn-wrapper">
              <el-button style="background-color: #3a68f2" type="primary" @click="currentTab = 2">下一步</el-button>
            </div>
          </div>

          <div v-show="currentTab === 2">
            <el-form-item v-for="item in addPLForm.otherList" :key="item.label" label-width="130px" :prop="item.label" :label="item.label">
              <el-input v-model="item.value" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item v-show="isShowAddCustomFees">
              <template #label>
                <div style="white-space: nowrap">
                  <el-input v-model="addCustomFeeForm.label" placeholder="费用名称"></el-input>
                </div>
              </template>

              <div class="merge">
                <el-input v-model="addCustomFeeForm.value" placeholder="请输入"></el-input>
                <el-tooltip placement="top" content="删除当前自定义费用">
                  <button @click="removeCustomFee" class="delete-btn" type="danger"></button>
                </el-tooltip>
                <el-button @click="handleAddCustomFee" class="add-custorm-fee-btn" type="text">确认添加</el-button>
              </div>
            </el-form-item>

            <el-form-item label-width="130px" prop="" label="" v-show="!isShowAddCustomFees">
              <el-button class="add-goods-btn" @click="addOther">新增自定义费用</el-button>
            </el-form-item>

            <div class="next-btn-wrapper">
              <el-button class="btn prev-btn" type="info" @click="currentTab = 1">上一步</el-button>
              <el-button style="background-color: #3a68f2" type="primary" @click="currentTab = 2">完成</el-button>
            </div>
          </div>
        </el-form>
      </main>
    </div>
  </el-dialog>
</template>

<script>
import StatisticsItem from './StatisticsItem.vue'
import { generateUniqueId } from '../utils/utils'

export default {
  components: {
    StatisticsItem
  },
  data() {
    return {
      dialogConfig: {
        width: '55%',
        setPLVisible: false,
        title: '设置盈亏线'
      },
      addPLForm: {
        aaa: '',
        orderGoodsList: [],
        otherList: [
          {
            label: '毛利率',
            value: ''
          }
        ]
      },
      currentTab: 2,
      isShowAddCustomFees: false,
      addCustomFeeForm: {
        label: '',
        value: ''
      }
    }
  },

  mounted() {
    this.addGoods()
  },

  methods: {
    addGoods() {
      this.addPLForm.orderGoodsList.push({
        id: generateUniqueId(),
        bbb: '',
        ccc: '',
        ddd: '',
        eee: ''
      })
    },

    addOther() {
      this.isShowAddCustomFees = true
    },

    removeGoods(goodsInfo) {
      this.addPLForm.orderGoodsList = this.addPLForm.orderGoodsList.filter((item) => item.id !== goodsInfo.id)
    },

    removeCustomFee() {
      this.addCustomFeeForm.label = ''
      this.addCustomFeeForm.value = ''
      this.isShowAddCustomFees = false
    },

    handleAddCustomFee() {
      const { label, value } = this.addCustomFeeForm
      if (!label) {
        return this.$message.warning('请填写自定义费用名称')
      }
      if (!value) {
        return this.$message.warning('请填写自定义费用数值')
      }
      this.addPLForm.otherList.push({ label, value })
      this.removeCustomFee()
    }
  }
}
</script>

<style lang="scss" scoped>
main {
  box-sizing: border-box;
  background-color: #fff;

  .add-goods-btn {
    width: 100%;
    height: 28px;
    background-color: #deeaff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #1469ff;
    border: 1px dotted #adcaff;
  }

  .next-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      &:hover {
        opacity: 0.5;
      }
    }

    .prev-btn {
      color: #000;
      font-size: 12px;
      border: 1px solid #dcdfe6;
      background-color: #fff;
    }
  }

  .merge {
    position: relative;
    width: 100%;
    height: 100%;

    .delete-btn {
      position: absolute;
      top: 50%;
      right: -27px;
      width: 16px !important;
      height: 16px !important;
      background: url('../../../assets/images/dashboard/delete-btn.png') no-repeat;
      background-size: cover;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .add-custorm-fee-btn {
      position: absolute;
      top: 50%;
      right: -100px;
      transform: translateY(-50%);
    }
  }
}
</style>
