<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <span style="color:red">①计划关闭后,7天内不允许该商品再次创建计划,短视频定向计划不可停止</span><br/>
      <span style="color:red">②一个定向计划最多可支持200个达人,可以添加50个商品，抽佣率可设置为0-29，单位%</span><br/>
      <span style="color:red">③一个通用计划仅可以添加一个商品，抽佣率可设置为1-29，单位% </span><br/>
      <span style="color:red">④一个商品最多可以在200个进行中定向计划中，并且可以同时在通用计划和定向计划中 </span><br/>
      <span style="color:red">⑤商品佣金上调立即生效，下调t+1日生效 </span><br/>
      <span
        style="color:red">⑥创建定向计划的达人需要为团购带货达人抖音id，尝试使用非团购带货达人超过50次，当日不可创建定向计划 </span><br/>
      <span
        style="color:red">⑦创建定向计划后不可移除商品，追加达人和移除达人，但可以取消达人带货 </span>
      <br/>
      <el-input v-model="listQuery.planId" clearable class="filter-item" style="width: 200px"
                placeholder="请输入计划id"/>


      <el-button v-permission="['POST /admin/dyplan/queryPlanList']" class="filter-item" type="primary"
                 icon="el-icon-search" @click="handleFilter">查找
      </el-button>
      <el-button v-permission="['POST /admin/dyplan/createCommonPlan']" class="filter-item" type="primary"
                 icon="el-icon-edit" @click="addTalent">添加通用计划
      </el-button>
      <el-button v-permission="['POST /admin/dyplan/createNonCommonPlan']" class="filter-item" type="primary"
                 icon="el-icon-edit" @click="addDingxiang">添加定向计划
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit
              highlight-current-row>
      <el-table-column align="center" label="id" prop="id" type="index" fixed width="120"/>

      <el-table-column align="center" label="计划id" prop="planId"/>

      <el-table-column align="center" label="计划类型" prop="planType">
        <template slot-scope="scope">
          {{ planTypeMap[scope.row.planType] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划带货场景" prop="planType">
        <template slot-scope="scope">
          {{ contentTypeMap[scope.row.contentType] }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态" prop="planStatus">
        <template slot-scope="scope">
          {{ planStatusMap[scope.row.planStatus] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="planCreateTime"/>

      <el-table-column align="center" label="操作" prop="">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/dyplan/updatePlanStatus']" type="text" icon="el-icon-edit"
                     v-if="(scope.row.planType == 2 && scope.row.contentType == 2 && scope.row.planStatus != 3) || (scope.row.planType == 1 && scope.row.planStatus != 3)"
                     size="mini" @click="updateUpState(scope.row)">更新计划状态
          </el-button>

          <el-button v-permission="['POST /admin/dyplan/createCommonPlan']" type="text" icon="el-icon-edit"
                     v-if="scope.row.planType == 1 && scope.row.planStatus!=3" size="mini"
                     @click="updateTongyong(scope.row)">修改通用计划
          </el-button>

          <el-button v-permission="['GET /admin/dyplan/queryPlanDetail']" type="text" icon=""
                     size="mini" @click="toDetail(scope.row)">计划详情
          </el-button>

          <!-- <el-button v-permission="['POST /admin/dytalent/createCommonPlan']" type="text" icon="el-icon-edit"
            v-if="scope.row.planType == 2 || scope.row.planType == 3" size="mini"
            @click="updateDingxiang(scope.row)">修改定向计划</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>

    <el-dialog :visible.sync="showView" title="修改计划状态" width="500px">
      <el-form status-icon label-position="left" label-width="100px" style="width:400px; margin-left:50px;">
        <pre v-if="tempRow.planType == '2'||tempRow.planType == '3' ">
      定向计划状态修改，仅支持传3，将计划修改为已取消；
      仅支持修改直播间定向佣金计划，不支持修改短视频定向佣金计划
        1：进行中
        2：已完成
        3：已取消
         </pre>
        <el-form-item label="选择状态">
          <el-select v-if="tempRow.planType == '1'" v-model="tempRow.planStatus" class="filter-item"
                     placeholder="选择状态">
            <el-option :value="1" label="进行中"/>
            <el-option :value="2" label="已完成"/>
            <el-option :value="3" label="已取消"/>
          </el-select>
          <el-select v-if="tempRow.planType == '2' " v-model="tempRow.planStatus=3"
                     class="filter-item" placeholder="选择状态">
            <el-option :value="1" label="进行中" :disabled="true"/>
            <el-option :value="3" label="取消"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showView = false">取消</el-button>
        <el-button type="primary" @click="configUpState()">确定修改</el-button>
      </div>
    </el-dialog>


    <!-- 添加通用计划 -->
    <el-dialog :visible.sync="addVisible" :title="xiugai ? '修改通用计划' : '添加通用计划'" width="650px">
      <el-form ref="addForm" :rules="addRules" :model="addForm" status-icon label-position="left" label-width="100px"
               style="width:400px; margin-left:50px;">

        <el-form-item label="带货场景" prop="content_type">
          <el-select :disabled="xiugai" v-model="addForm.content_type" class="filter-item" style="width:100%"
                     placeholder="请选择带货场景">
            <el-option v-for="(item, index) in  contentTypeMap" :key="index" :label="item" :value="index"/>
          </el-select>
        </el-form-item>

        <el-form-item label="抖音商品id" prop="product_id">
          <el-select :disabled="xiugai" v-model="addForm.product_id" filterable style="width:100%" class="filter-item"
                     placeholder="请选择带货场景">
            <el-option v-for="(item, index) in  dyGoodsList" :key="index" :label="item.shopName+item.goodsName"
                       :value="item.dyGoodsNo"/>
          </el-select>
        </el-form-item>
        <span style="color: green">note:佣金比例在1%-29%,使用万分位,如500表示50%</span>
        <el-form-item label="佣金比例" prop="commission_rate">
          <el-input-number type="number" v-model="addForm.commission_rate" style="width:100%" clearable maxlength="4"
                           :max="2900" :min="100"/>
        </el-form-item>

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

    </el-dialog>


    <!--添加定向计划-->
    <addDouYinDirectPlan @getList="getList" ref="addDouYinDirectPlan"/>


  </div>
</template>

<script>
import {createCommonPlan, dyGoodsGoodsList, queryPlanList, updatePlanStatus,} from "@/api/dyApp";
import Pagination from "@/components/Pagination";
import addDouYinDirectPlan from "./compent/addDouYinDirectPlan.vue";

let vm;
export default {
  name: "Coupon",
  components: {Pagination, addDouYinDirectPlan},
  data() {
    return {
      xiugai: false,
      tempRow: {},
      showView: false,
      total: 0,
      list: [],
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        planId: '',
      },
      dyGoodsList: [],
      planTypeMap: {
        1: '通用计划',
        2: '直播间定向计划',
        3: '短视频定向计划'
      },
      contentTypeMap: {
        1: '仅短视频',
        2: '仅直播间',
        3: '短视频和直播间'
      },
      planStatusMap: {
        1: "进行中",
        2: "已完成",
        3: "已取消"
      },
      addForm: {
        product_id: '',
        content_type: '',
        commission_rate: ''
      },
      addVisible: false,
      addRules: {
        content_type: [{required: true, message: '请选择带货场景', trigger: 'blur'}],
        product_id: [{required: true, message: '请选择抖音商品id', trigger: 'blur'}],
        commission_rate: [{required: true, message: '佣金比例不能为空', trigger: 'blur'}],
      },

    };
  },
  created() {
    this.getList();
  },
  methods: {
    toDetail(row) {
      //this.$refs.douyinPlanDetail.getDetail(row.planId);
      this.$router.push({path: "/promotion/douyinPlanDetail", query: {planId: row.planId}});
    },
    updateTongyong(row) {
      // this.temp
      this.addVisible = true;
      this.xiugai = true;
      this.addForm = {
        plan_id: row.planId,
        product_id: row.productId,
        content_type: row.contentType + '',
        commission_rate: row.commissionRate,
      };
      this.getdyGoods();
    },
    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: '操作成功'
        });
        this.getList();

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

    },
    updateUpState(row) {
      this.showView = true;
      this.tempRow = {};
      this.tempRow = row;
    },

    addDingxiang() {
      this.$refs.addDouYinDirectPlan.addDingxiang();
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    getList() {
      this.listLoading = true;

      queryPlanList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });

    },
    addTalent() {
      this.xiugai = false;
      this.addVisible = true;
      this.addForm = {
        product_id: '',
        content_type: '',
        commission_rate: ''
      };
      this.getdyGoods();
    },
    getdyGoods() {
      dyGoodsGoodsList({pageNum: 1, pageSize: 999})
        .then((res) => {
          this.dyGoodsList = res.data.data.list;
        })
    },
    handleAdd() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          createCommonPlan(this.addForm).then(response => {

            this.addVisible = false;
            this.$notify.success({
              title: '成功',
              message: '操作成功'
            });
            this.getList();

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

  },
  beforeCreate() {
    vm = this;
  },

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