<style>
  @import "../../../financial/css/cssReset.css";

  .stageManagement {
    padding: 20px;
  }

  .stageManagement .box {
    width: 100%;
    border-radius: 6px;
    background: #fff;
    padding: 20px;
    margin-bottom: 25px;
  }

  .stageManagement .bold {
    font-weight: 700;
    font-size: 14px;
    color: #333;
  }

  .stageManagement ul li {
    display: flex;
    align-items: center;
  }

  .stageManagement .btn {
    display: flex;
    align-items: center;
    margin-top: 24px;
    margin-left: 56px;
    ;
    margin-bottom: 30px;
  }
</style>

<template>
  <div class="stageManagement" style="background: transparent;">
    <div class="box">
      <div class="bold" style="margin-bottom: 30px;">跟进阶段</div>
      <draggable v-model="followupStage">
        <ul v-for="(x,y) in followupStage" :key="y">
          <div v-if="x.IsDefault==0">

            <li>
              <div style="width: 57px;">
                <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;margin: 0 10px;"></i>
              </div>
              <q-input clearable debounce filled maxlength="10" counter v-model="x.Name" style="width:500px"
                @input="$forceUpdate()" placeholder="名称" :rules="[val => !!val || '不能为空']" />
              <q-btn flat size="sm" icon="delete" color="negative" class="q-mr-xs" style="margin-left: 10px;" label=""
                @click="getStageDel(x,y)" />
            </li>
          </div>
        </ul>
      </draggable>
      <ul>
        <li v-for="(x,y) in followupStage_d" :key="y">
          <div style="width: 57px;">
          </div>
          <q-input clearable debounce filled v-model="x.Name" style="width:500px" disable @input="$forceUpdate()"
            placeholder="名称" :rules="[val => !!val || '不能为空']" />
        </li>
      </ul>
      <div class="btn">
        <q-btn v-if="followupStage.length<30" color="accent" class="q-mr-md" label="添加" icon='add' @click="followupStage.push({Id: 0,
            IsDefault: 0,
            Name: '',
            OptionsList: [],
            Sort: 0,
            Type: 1}),$forceUpdate()" style="width: 100px;" />
        <span style="color:#858598"> 已设/可设上限：{{followupStage.length}}/30 </span>
      </div>
    </div>
    <div class="box">
      <div class="bold">结束跟进</div>
      <div v-for="(x,y) in reasonList" :key="y" v-if="x.Type==2">
        <ul style="margin-left: 30px;margin-top: 10px;">
          <li>
            <q-input clearable filled debounce placeholder="名称" v-model="x.Name" style="width:500px" disable />
          </li>
          <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name=='已输单'">输单原因</li>
          <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name=='无效'">无效原因</li>
          <draggable v-model="x.OptionsList">
            <li v-for="(item,index) in x.OptionsList" :key="index">
              <div style="width: 31px;">
                <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;margin: 0 10px;"></i>
              </div>
              <q-input clearable debounce filled maxlength="10" counter v-model="item.Name" style="width:500px"
                @input="$forceUpdate()" placeholder="名称" :rules="[val => !!val || '不能为空']" />
              <q-btn flat size="sm" icon="delete" color="negative" class="q-mr-xs" style="margin-left: 10px;" label=""
                @click="setCauseDel(y,index,x,item)" />
            </li>
          </draggable>
        </ul>
        <div class="btn" style="margin-left: 61px">
          <q-btn v-if="x.OptionsList.length<30" color="accent" class="q-mr-md" label="添加" icon='add'
            @click="reasonList[y].OptionsList.push({Id:0,Name:'',disable:false}),$forceUpdate()"
            style="width: 100px;" />
          <span style="color:#858598"> 已设/可设上限：{{x.OptionsList.length}}/30 </span>
        </div>
      </div>
    </div>
    <div class="box">
      <el-form label-width="120px">
      </el-form>
      <q-card-actions align="left" class="bg-white">
        <q-btn color="accent" class="q-mr-md" label="保存" @click="savemove()" style="width: 100px;" :loading="loading" />
        <q-btn class="q-mr-md" label="返回" @click="goblck()" style="width: 60px;" />
      </q-card-actions>
    </div>
  </div>
</template>

<script>
  import draggable from "vuedraggable"
  import {
    getCustomerStageList,
    setCustomerStageInfo,
    validataCustomerStageDel,
    validataCustomerCauseDel
  } from '../../../../api/system/wechat';
  export default {
    meta: {
      title: "阶段管理"
    },
    components: {
      draggable,
    },
    name: "stageManagement",
    data() {
      return {
        loading: false,
        addMsg: [],
        followupStage: [],
        followupStage_d: [],
        reasonList: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        getCustomerStageList({}).then(res => {
          this.loading = false
          if (res.Code == 1) {
            this.addMsg = res.Data
            this.followupStage = [];
            this.followupStage_d = [];
            this.reasonList = []
            let orderEntered = false //判读是否有已输单
            let invalid = false //无效
            let list = JSON.parse(JSON.stringify(this.addMsg))
            list.forEach(x => {
              if (x.Type == 1) {
                if (x.IsDefault == 0) {
                  this.followupStage.push(x)
                } else {
                  this.followupStage_d.push(x)
                }
              }

              if (x.Type == 2) {
                this.reasonList.push(x)
                if (x.Name == '已输单') {
                  orderEntered = true
                }
                if (x.Name == '无效') {
                  invalid = true
                }
              }
            })

            if (orderEntered == false) { //没有的话 加一个已输单
              let obj = {
                Id: 0,
                IsDefault: 0,
                Name: '已输单',
                OptionsList: [],
                Sort: 0,
                Type: 2
              };
              this.reasonList.push(obj)
            }
            if (invalid == false) { //没有的话 加一个无效
              let obj = {
                Id: 0,
                IsDefault: 0,
                Name: '无效',
                OptionsList: [],
                Sort: 0,
                Type: 2
              };
              this.reasonList.push(obj)
            }
          }
        })
      },
      goblck() { //返回上一个页面
        this.$router.go(-1); //返回上一层
      },
      savemove() {
        let show = false
        for (let i = 0; i < this.followupStage.length; i++) {//判断根据阶段的值填写没有
          let x = this.followupStage[i]
          if (x.Name == '') {
            this.$q.notify({
              type: 'negative',
              message: '请填写跟进阶段列表选项值',
              position: 'top'
            })
            return
            break
          }
        }
        for (let i = 0; i < this.reasonList.length; i++) {
          let x = this.reasonList[i]
          if (show == true) {
            return
            break
          }
          let list = JSON.parse(JSON.stringify(x.OptionsList))
          let maxnum = list.sort((a, b) => { return b.Id-a.Id })[0].Id
          
          for (let j = 0; j < x.OptionsList.length; j++) {
            let z = x.OptionsList[j]
            
            if (z.Name == '') {
              this.$q.notify({
                type: 'negative',
                message: '请填写'+x.Name+'原因值',
                position: 'top'
              })
              show = true
              return
              break
            }
            if(z.Id==0){
              z.Id = maxnum+1;
              maxnum++
            }
          }
        }
        this.addMsg = []
        this.addMsg = (this.followupStage.concat(this.followupStage_d)).concat(this.reasonList)
        this.addMsg.forEach((x,i)=>{
          x.Sort = i+1
        })
        this.loading = true
        setCustomerStageInfo(this.addMsg).then(res => {
          this.loading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: res.Message,
            position: 'top'
          })
          this.goblck()
        }).catch((e) => {
          this.loading = false
        })
      },
      getStageDel(x,index){//判断阶段是否能删除
        validataCustomerStageDel({StageId:x.Id}).then(res => {
          if(res.Code==1){
            if(res.Data.UseState==false){
              this.followupStage.splice(index,1)
            }else{
              this.$q.notify({
                type: 'negative',
                message: '不能删除',
                position: 'top'
              })
            }
          }
        }).catch((e) => {
        })
      },
      setCauseDel(y,index,x,item){//验证阶段输单/无效的 原因选项是否可以删除
        let Type = 1
        if(x.Name=='无效')Type =2
        let data = {
          CauseId:item.Id,
          Type:Type
        }
        validataCustomerCauseDel(data).then(res => {
          if(res.Code==1){
            if(res.Data.UseState==false){
              this.reasonList[y].OptionsList.splice(index,1)
            }else{
              this.$q.notify({
                type: 'negative',
                message: '不能删除',
                position: 'top'
              })
            }
          }
        }).catch((e) => {
        })

      }
    }
  }
</script>