<template>
  <div class="app-container">

    <el-dialog :visible.sync="addVisibledx" :title="xiugai?'修改':'添加定向计划'" width="700px">
      <el-form ref="dxForm" :rules="addRulesdx" :model="dxForm" status-icon label-position="left"
               label-width="100px" style="width:600px; margin-left:50px;">

        <el-form-item label="计划名称" prop="planName">
          <el-input :disabled="xiugai" v-model="dxForm.planName" style="width:200px" clearable/>
        </el-form-item>

        <el-form-item label="计划类型" prop="planType">
          <el-select :disabled="xiugai" v-model="dxForm.planType" clearable class="filter-item"
                     placeholder="请选择计划类型">
            <template v-for="(item, index) in  planTypeMap">
              <el-option :key="index" :label="item" :value="index" v-if="index != 1"/>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="达人抖音号" prop="douyinIdList">
          <el-select v-model="dxForm.douyinIdList" multiple filterable clearable class="filter-item"
                     placeholder="请选择达人抖音号">
            <el-option v-for="(item, index) in  darenList" :key="index"
                       :label="item.nickName + '(' + item.talentId + ')'" :value="item.talentId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="选择抖音商品">
          <el-select v-model="chooseTempgoods" @change="selectdygoods" filterable clearable
                     class="filter-item" placeholder="请选择抖音商品">
            <el-option v-for="(item, index) in  dyGoodsList" :key="index"
                       :label="item.shopName+'' +item.goodsName + '(' + item.goodsName + ')'" :value="item.dyGoodsNo"/>
          </el-select>
        </el-form-item>

        <el-table :data="tempList" border highlight-current-row>
          <el-table-column label="抖音商品id" prop="productId"/>
          <el-table-column label="抖音商品名称" prop="productId">
            <template slot-scope="scope">
              {{ getgoodsName(scope.row.productId) }}
            </template>
          </el-table-column>
          <el-table-column label="商品的定向抽佣率，万分数" prop="commissionRate">
            <template slot-scope="scope">
              <span style="color: green">note:佣金比例在0%-29%,使用万分位,如500表示50%</span>
              <el-input type="number" v-model="scope.row.commissionRate" style="width:200px" clearable/>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" size="mini"
                         @click="deltempListRow(scope.row.index)">删除
              </el-button>
            </template>
          </el-table-column>


        </el-table>
        <br/>
        <el-form-item label="计划时间" prop="chooseJhTime">
          <el-date-picker :disabled="xiugai" v-model="dxForm.chooseJhTime" :picker-options="{}"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item :disabled="xiugai" label="佣金有效期" prop="commissionDuration">
          <el-input type="number" v-model="dxForm.commissionDuration" style="width:120px" clearable
                    maxlength="4"/>
          天
        </el-form-item>

        <el-form-item label="联系电话" prop="merchantPhone">
          <el-input type="number" v-model="dxForm.merchantPhone" style="width:200px" clearable/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisibledx = false">取消</el-button>
        <el-button type="primary" @click="handleAdddx()">确定</el-button>
      </div>

    </el-dialog>
  </div>


</template>

<script>
import {dyGoodsGoodsList, talentList, updatePlanStatus,} from "@/api/dyApp";

export default {
  name: "Coupon",
  components: {},
  data() {
    return {
      xiugai: false,
      total: 0,
      list: [],
      dyGoodsList: [],
      planTypeMap: {
        1: '通用计划',
        2: '直播间定向计划',
        3: '短视频定向计划'
      },
      contentTypeMap: {
        1: '仅短视频',
        2: '仅直播间',
        3: '短视频和直播间'
      },
      planStatusMap: {
        1: "进行中",
        2: "已完成",
        3: "已取消"
      },

      dxForm: {
        douyinIdList: [],
        merchantPhone: '',
        productList: [],
        planName: '',
        chooseJhTime: [],//临时变量
        planStartTime: '',
        planEndTime: '',
        commissionDuration: '',
        planType: ''
      },
      chooseTempgoods: [],
      tempList: [],
      addVisibledx: false,

      addRulesdx: {
        planName: [{required: true, message: '计划名称不能为空', trigger: 'blur'}],
        planType: [{required: true, message: '请选择计划类型', trigger: 'blur'}],
        douyinIdList: [{required: true, message: '请选择达人号', trigger: 'blur'}],
        chooseJhTime: [{required: true, message: '请选择计划时间', trigger: 'blur'}],
        commissionDuration: [{required: true, message: '佣金有效期不能为空', trigger: 'blur'}],
        merchantPhone: [{required: true, message: '联系电话不能为空', trigger: 'blur'}],
      },
      darenList: []


    };
  },
  created() {
    // this.getList();
  },
  methods: {
    updateDingxiang(data) {
      //修改通用计划
      this.addVisibledx = true;
      this.xiugai = true;

      this.getdyGoods();
      this.getTalentList();


      let dyidlist = [];
      data.dyTalentList.forEach(e => {
        dyidlist.push(e.talentId)
      })

      this.gdlist = [];
      data.goodsList.forEach(e => {
        dyidlist.push({product_id: e.roductId, commission_rate: e.commissionRate})
      })

      this.tempList = gdlist;
      this.dxForm = {
        douyinIdList: dyidlist,
        merchantPhone: data.merchantPhone,
        productList: dyidlist,
        planName: data.planName,
        planStartTime: data.planStartTime,
        planEndTime: data.planEndTime,
        commissionDuration: data.commissionDuration,
        planType: data.planType,
        chooseJhTime: [data.planStartTime, data.planEndTime]
      };

    },
    configUpState() {
      if (this.tempRow.planStatus == null || this.tempRow.planStatus == '') {
        this.$notify.error({
          title: '提示',
          message: '请选择状态'
        })
        return
      }
      let req = [{plan_id: this.tempRow.planId, status: this.tempRow.planStatus, planType: this.tempRow.planType}];
      updatePlanStatus(req).then(response => {
        this.showView = false;
        this.$notify.success({
          title: '成功',
          message: '操作成功'
        });
        if (this.xiugai) {
          this.$emit('getDetail');
        } else {
          this.$emit('getList');
        }

      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.errmsg
        })
      })

    },
    updateUpState(row) {
      this.showView = true;
      this.tempRow = {};
      this.tempRow = row;
    },
    handleAdddx() {
      this.$refs['dxForm'].validate((valid) => {
        if (valid) {
          this.dxForm.planStartTime = this.dxForm.chooseJhTime[0];
          this.dxForm.planEndTime = this.dxForm.chooseJhTime[1];
          if (this.tempList.length == 0) {
            this.$notify.error({
              title: '失败',
              message: '请选择抖音商品，且填入抽佣率'
            })
            return;
          }

          let boo = false;
          this.tempList.forEach(t => {
            console.log(JSON.stringify(t));
            if (t.commissionRate == null  || t.commissionRate < 0) {
              boo = true;
            }
          })
          if (boo) {
            this.$notify.error({
              title: '失败',
              message: '请填入抽佣率'
            })
            return;
          }

          this.dxForm.productList = this.tempList;
          createNonCommonPlan(this.dxForm).then(() => {
              this.addVisibledx = false;
              this.$notify.success({
                  title: '成功',
                  message: '添加成功'
              });
              this.getList();

          }).catch(response => {
              this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
              })
          })
        }
      })
    },
    selectdygoods(e) {
      if (e == null || e == '') {
        return;
      }
      let boo = false;
      this.tempList.forEach(t => {
        if (t.productId == e) {
          boo = true;
        }
      })

      if (boo) {
        return;
      }

      this.tempList.push({productId: e, commissionRate: 0});
    },
    deltempListRow(index) {
      this.tempList.splice(index, 1);
    },
    getgoodsName(goodsId) {
      let nm = "";
      this.dyGoodsList.forEach(e => {
        if (e.dyGoodsNo == goodsId) {
          nm = e.goodsName;
        }
      })
      return nm;
    },
    addDingxiang() {
      this.addVisibledx = true;
      this.xiugai = false;
      this.dxForm = {
        douyinIdList: [],
        merchantPhone: '',
        productList: [],
        planName: '',
        planStartTime: '',
        planEndTime: '',
        commissionDuration: '',
        planType: ''
      };

      this.getdyGoods();
      this.getTalentList();

    },
    getTalentList() {
      talentList({pageNum: 1, pageSize: 999})
        .then((response) => {
          this.darenList = response.data.data.list;
        })
    },

    getdyGoods() {
      dyGoodsGoodsList({pageNum: 1, pageSize: 999})
        .then((res) => {
          this.dyGoodsList = res.data.data.list;
        })
    },
  },
  beforeCreate() {
    // vm = this;
  },

};
</script>
<style scoped>
.el-form-item {
  margin-bottom: 18px;
}
</style>
