<template>
  <div class="mainBox">
    <!-- 第一部分：姓名和电话 -->
    <div class="titleOut">第一步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">添加客户</span>
    </div>
    <el-form :model="step1Form" ref="step1Form" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(field, index) in step1Form.fields"
        :label=" ''+(index + 1)+'.'"
        :key="field.key"
        :prop="'fields.' + index"
      >
        <el-row :gutter="24">
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.name"
              placeholder="姓名"

              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.phone"
              placeholder="电话"
              maxlength="11"
              show-word-limit
              :rules="[
                { required: true, message: '请输入电话号码', trigger: 'blur' },
                { pattern: /^[0-9]{10,11}$/, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
              ]"
            ></el-input>
          </el-col>

          <el-col :span="4">
            <el-button size="mini" type="danger" @click.prevent="removeField(index, 'step1Form', 'fields')">删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 提交和添加字段按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('step1Form')">提交</el-button>
        <el-button size="mini" @click="addField('step1Form', 'fields')">新增条目</el-button>
        <!--        <el-button size="mini" @click="resetForm('step1Form')">重置</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 第二部分：姓名和销售 -->
    <div class="titleOut">第二步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户配置销售</span>
    </div>
    <el-form :model="step2Form" ref="step2Form" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(field, index) in step2Form.fields"
        :label=" ''+(index + 1)+'.'"
        :key="field.key"
        :prop="'fields.' + index"
      >
        <el-row :gutter="24">
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.name"
              placeholder="姓名"
              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <!--            <el-input-->
            <!--              size="mini"-->
            <!--              v-model="field.xiaoshou"-->
            <!--              placeholder="销售"-->
            <!--              :rules="[{ required: true, message: '请输入销售数据', trigger: 'blur' }]"-->
            <!--            ></el-input>-->

            <el-select size="mini" v-model="field.xiaoshou" placeholder="请选择">
              <el-option
                v-for="item in saleList"
                :key="item.id"
                :label="item.username"
                :value="item.username">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-button size="mini" :disabled="step2Form.fields.length<1" type="danger"
                       @click.prevent="removeField(index, 'step2Form', 'fields')">删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 提交和添加字段按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('step2Form')">提交</el-button>
        <el-button size="mini" @click="addField('step2Form', 'fields')">新增条目</el-button>
        <!--        <el-button size="mini" @click="resetForm('step2Form')">重置</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 第三部分：姓名和金额 -->
    <div class="titleOut">第三步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户充值</span>
    </div>
    <el-form :model="step3Form" ref="step3Form" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(field, index) in step3Form.fields"
        :label=" ''+(index + 1)+'.'"
        :key="field.key"
        :prop="'fields.' + index"
      >
        <el-row :gutter="24">
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.name"
              placeholder="姓名"
              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.money"
              placeholder="金额"
              :rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="danger" @click.prevent="removeField(index, 'step3Form', 'fields')">删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 提交和添加字段按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('step3Form')">提交</el-button>
        <el-button size="mini" @click="addField('step3Form', 'fields')">新增条目</el-button>
        <!--        <el-button size="mini" @click="resetForm('step3Form')">重置</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 第四部部分：姓名和金额 -->
    <div class="titleOut">第四步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">产品下单</span>
    </div>
    <el-form :model="step4Form" ref="step4Form" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(field, index) in step4Form.fields"
        :label=" ''+(index + 1)+'.'"
        :key="field.key"
        :prop="'fields.' + index"
      >
        <el-row :gutter="24">
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.name"
              placeholder="姓名"
              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              size="mini"
              v-model="field.money"
              placeholder="金额"
              :rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="field.stime"
              type="date"
              size="mini"
              placeholder="销售时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="danger" @click.prevent="removeField(index, 'step4Form', 'fields')">删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 提交和添加字段按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('step4Form')">提交</el-button>
        <el-button size="mini" @click="addField('step4Form', 'fields')">新增条目</el-button>
        <!--        <el-button size="mini" @click="resetForm('step4Form')">重置</el-button>-->
      </el-form-item>
    </el-form>
    <!-- 第五部部分：姓名和金额 -->
    <div class="titleOut">第五步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">确认支付</span>
    </div>
    <el-form :model="step5Form" ref="step5Form" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(field, index) in step5Form.fields"
        :label=" ''+(index + 1)+'.'"
        :key="field.key"
        :prop="'fields.' + index"
      >
        <el-row :gutter="24">
          <el-col :span="4">
            <el-input
              size="mini"
              v-model="field.name"
              placeholder="姓名"
              :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-input
              size="mini"
              v-model="field.money"
              placeholder="金额"
              :rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="field.stime"
              type="date"
              size="mini"
              placeholder="开始时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>

          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="field.etime"
              type="date"
              size="mini"
              placeholder="结束时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="danger" @click.prevent="removeField(index, 'step5Form', 'fields')">删除
            </el-button>
          </el-col>
        </el-row>
        <ul class="typeStyle">
          <li>分类1：
            <el-input
              size="mini"
              v-model="field.type1"
              placeholder="请输入分类1"
              :rules="[{ required: true, message: '请输入分类1', trigger: 'blur' }]"
            ></el-input>
          </li>
          <li>分类2：
            <el-input
              :disabled="!field.type1"
              size="mini"
              v-model="field.type2"
              placeholder="请输入分类2"
              :rules="[{ required: true, message: '请输入分类2', trigger: 'blur' }]"
            ></el-input>
          </li>
          <li>分类3：
            <el-input
              size="mini"
              :disabled="!field.type1||!field.type2"
              v-model="field.type3"
              placeholder="请输入分类3"
              :rules="[{ required: true, message: '请输入分类3', trigger: 'blur' }]"
            ></el-input>
          </li>
        </ul>
      </el-form-item>
      <!-- 提交和添加字段按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('step5Form')">提交</el-button>
        <el-button size="mini" @click="addField('step5Form', 'fields')">新增条目</el-button>
        <!--        <el-button size="mini" @click="resetForm('step5Form')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {
  reqAddSaleRevenueFive, reqAddSaleRevenueFour,
  reqAddSaleRevenueOne,
  reqAddSaleRevenueTHree,
  reqAddSaleRevenueTwo
} from "@/api/operation/importSalesRevenue";
import {reqGetSaleManList} from "@/api/operation/analyze";

export default {
  name: "importSalesRevenue",
  data() {
    return {
      saleList: [],
      // 第一部分的表单数据
      step1Form: {
        fields: [{key: Date.now(), phone: '', name: ''}],
      },
      // 第二部分的表单数据
      step2Form: {
        fields: [{key: Date.now(), name: '', xiaoshou: ''}],
      },
      // 第三部分的表单数据
      step3Form: {
        fields: [{key: Date.now(), name: '', money: ''}],
      },
      // 第四部分的表单数据
      step4Form: {
        fields: [{key: Date.now(), name: '', money: '', stime: ''}],
      },
      step5Form: {
        fields: [{key: Date.now(), name: '', money: '', stime: '', etime: '', type1: '', type2: '', type3: ''}],
      },
    };
  },
  mounted() {
    reqGetSaleManList().then(res => {
      if (res.status) {
        this.saleList = res.data
      }
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this[formName].fields);
          if (formName === 'step1Form') {
            reqAddSaleRevenueOne({data: this[formName].fields}).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
                this[formName].fields = [{key: Date.now(), phone: '', name: ''}]
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (formName === 'step2Form') {
            reqAddSaleRevenueTwo({data: this[formName].fields}).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (formName === 'step3Form') {
            reqAddSaleRevenueTHree({data: this[formName].fields}).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (formName === 'step4Form') {
            reqAddSaleRevenueFour({data: this[formName].fields}).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            let res = []
            let arr = this[formName].fields
            for (let i = 0; i < arr.length; i++) {
              let item = {
                name: arr[i].name,
                money: arr[i].money,
                stime: arr[i].stime,
                etime: arr[i].etime,
                resource_type: ''
              }
              if (arr[i].type3) {
                item.resource_type = arr[i].type1 + "-" + arr[i].type2 + "-" + arr[i].type3
              } else if (arr[i].type2) {
                item.resource_type = arr[i].type1 + "-" + arr[i].type2
              } else {
                item.resource_type = arr[i].type1
              }
              res.push(item)
            }
            // let ploay = {
            //   data: res
            // }
            reqAddSaleRevenueFive({data: res}).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }

        } else {
          console.log('提交出错！');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this[formName].fields = [{key: Date.now(), name: '', phone: '', xiaoshou: '', money: ''}].filter(f => {
        if (formName === 'step1Form') return f.phone !== undefined;
        if (formName === 'step2Form') return f.xiaoshou !== undefined;
        if (formName === 'step3Form') return f.money !== undefined;
      });
    },
    addField(formName, fieldType) {
      this[formName][fieldType].push({
        key: Date.now(),
        name: '',
        phone: formName === 'step1Form' ? '' : undefined,
        xiaoshou: formName === 'step2Form' ? '' : undefined,
        money: formName === 'step3Form' ? '' : undefined,
      });
    },
    removeField(index, formName, fieldType) {
      this[formName][fieldType].splice(index, 1);
    },
  }
}
</script>

<style scoped lang="scss">
.demo-dynamic {
  max-width: 1200px;
  margin: 20px auto;
}

.mainBox {
  padding: 20px;
  height: calc(100vh - 100px);
  background: #fff;
  overflow-y: auto;
}

.titleOut {
  font-size: 18px;
  font-weight: bold;
  color: #4c4948;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.typeStyle {
  padding-left: 0;
  display: flex;


  li {
    display: flex;
    margin-right: 15px;

    .el-input {
      width: 200px;
    }
  }

  * {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}
</style>
