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

  .addPhase {
    padding: 20px;
  }

  .addPhase .box {
    width: 100%;

    border-radius: 6px;
    background: #fff;
    padding: 20px;
    margin-bottom: 25px;
  }

  .addPhase .bold {
    font-weight: 760;
    font-size: 16px;
    color: #333;
    border-left: 3px solid #3470ff;
    margin-bottom: 20px;
    margin-left: -20px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .addPhase .all-stage {
    width: 300px;
    padding: 20px 45px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    min-height: 260px;
  }

  .addPhase .select-item-title {
    font-size: 14px;
    font-weight: 800;
    padding-bottom: 10px;
  }

  .addPhase .right-arrow {
    width: 28px;
    height: 28px;
    background: #e7e7e7;
    border-radius: 50%;
    align-self: center;
    line-height: 28px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 30px;
  }

  .addPhase .user_lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
</style>

<template>
  <div class="addPhase" style="background: transparent;">
    <div class="box">
      <div class="bold">名称</div>
      <q-input clearable debounce filled maxlength="20" counter v-model="addMsg.FlowName" style="width:600px"
        @input="$forceUpdate()" placeholder="名称" :rules="[val => !!val || '不能为空']" />
    </div>
    <div class="box">
      <div class="bold">阶段适用范围</div>
      <q-btn class="q-mr-md" label="选择部门/成员" @click="outerVisible = true" />
      <div class="user_lists" v-if="showMember && showMember.length>0">
        <div v-for="(x,y) in showMember" :key='y'>
          <el-tag style="margin-right: 15px;" v-if="x.DataType==1"><i class="el-icon-folder"
              style="margin-right: 3px;"></i>{{x.DeptName}}</el-tag>
          <el-tag style="margin-right: 15px;" type="success" v-if="x.DataType==2"><i class="el-icon-user-solid"
              style="margin-right: 3px;"></i>{{x.DeptName}}</el-tag>

        </div>
      </div>
    </div>
    <div class="box">
      <div class="bold">选择使用阶段
        <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">
          若没有找到可选项，请前往 <span style="color:#3470ff;cursor: pointer;" @click="stageManagement"> "阶段管理"</span>进行</span>
      </div>
      <div style="display:flex;align-items: center;">
        <div class="all-stage" :style="{height:getheight+'px'}">
          <p class="select-item-title">全部阶段</p>
          <div class="" v-for="(x,y) in StageList" :key='y' v-if="x.Type==1">
            <q-checkbox v-model="addMsg.UseStage" :val="x.Id" :label="x.Name" :disable="x.IsDefault==0?false:true"
              @input="getusestageName" />
          </div>
        </div>
        <div class="right-arrow"><i class="el-icon-arrow-right"></i></div>
        <div class="all-stage" :style="{height:getheight+'px'}">
          <p class="select-item-title">已选阶段</p>
          <div style="height:40px;line-height: 40px;" v-for="(x,y) in UseStageName" :key='y' v-if="x.IsDefault==0">
            <span>{{x.Name}}</span>

          </div>
          <div style="height:40px;line-height: 40px;" v-for="(x,y) in UseStageName" :key='y' v-if="x.IsDefault==1">

            <span style="color: #ccc;">{{x.Name}}</span>

          </div>
        </div>
      </div>
    </div>
    <div v-if="StageList">
      <div class="box" v-for="(x,y) in StageList" v-if="x.Type==2">
        <div class="bold" v-if="x.Name=='已输单'">选择输单原因
          <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">若没有找到可选项，请前往 <span
              style="color:#3470ff;cursor: pointer;" @click="stageManagement"> "阶段管理"</span>进行</span>
        </div>
        <div class="bold" v-if="x.Name=='无效'">
          选择无效原因
          <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">若没有找到可选项，请前往 <span
              style="color:#3470ff;cursor: pointer;" @click="stageManagement"> "阶段管理"</span>进行</span>
        </div>
        <div style="display:flex;align-items: center;flex-wrap: wrap;">
          <q-checkbox v-model="addMsg.LoseCause" v-if="x.Name=='已输单'" v-for="(item,index) in x.OptionsList" :key='index'
            :val="item.Id" :label="item.Name" />
          <q-checkbox v-model="addMsg.InvalidCause" v-if="x.Name=='无效'" v-for="(item,index) in x.OptionsList"
            :key='index' :val="item.Id" :label="item.Name" />
        </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>
    <!-- 人员/部门选择 -->
    <choiceapprovalorbranch v-if="outerVisible" @close="outerVisible = false" @success="getsuccess2" :list=showMember cptype="1"></choiceapprovalorbranch>
  </div>
</template>

<script>
  import choiceapprovalorbranch from './components/choiceapprovalorbranch'
  import {
    getCustomerStageList,
    setCustomerStageFlowInfo,
    getCustomerStageFlowInfo
  } from '../../../../api/system/wechat';
  export default {
    meta: {
      title: "阶段管理"
    },
    components: {
      choiceapprovalorbranch
    },

    name: "addPhase",
    data() {
      return {
        loading: false,
        outerVisible: false,
        addMsg: {
          Id: 0,
          FlowName: '',
          DeptEmpList: [],
          UseStage: [],
          LoseCause: [],
          InvalidCause: [],
        },
        showMember: [],
        defaultlist: [],
        StageList: [],
        UseStageName: [],
        getheight: 270,
        gettypeoneList: [],//跟进阶段的数量
        FlowId: 0
      }
    },
    created() {

      this.getCustomerStageList()
    },
    methods: {
      goblck() { //返回上一个页面
        this.$router.go(-1); //返回上一层
      },
      savemove() {
        let data = JSON.parse(JSON.stringify(this.addMsg))
        if (data.FlowName == '') {
          this.$q.notify({
            type: 'negative',
            message: '请填写名称',
            position: 'top'
          })
          return
        }
        if (this.showMember.length == 0) {//判断部门
          this.$q.notify({
            type: 'negative',
            message: '请选择阶段适用范围',
            position: 'top'
          })
          return
        } else {
          data.DeptEmpList = [];
          if (this.showMember && this.showMember.length > 0) {
            this.showMember.forEach(x => {
              let obj = {
                Id: x.DeptId,
                Name: x.DeptName,
                Type: x.DataType,
              }
              data.DeptEmpList.push(obj)
            })
          }
        }
        if (data.UseStage.length > 0) {
          data.UseStage = data.UseStage.join(',')
        } else {
          data.UseStage = ''
        }
        if (data.LoseCause.length > 0) {
          data.LoseCause = data.LoseCause.join(',')
        } else {
          data.LoseCause = ''
        }
        if (data.InvalidCause.length > 0) {
          data.InvalidCause = data.InvalidCause.join(',')
        } else {
          data.InvalidCause = ''
        }
        this.loading = true
        setCustomerStageFlowInfo(data).then(res => {
          this.loading = false
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.goblck()
          }
        })
      },
      getdetails() {//获取详情
        getCustomerStageFlowInfo({ FlowId: this.FlowId }).then(res => {
          if (res.Code == 1) {
            this.addMsg = res.Data
            if (this.addMsg.UseStage.length !='') {
              this.addMsg.UseStage = this.addMsg.UseStage.split(',').map(Number)
            } else {
              this.addMsg.UseStage = []
            }
            if (this.addMsg.LoseCause.length !='') {
              this.addMsg.LoseCause = this.addMsg.LoseCause.split(',').map(Number)
            } else {
              this.addMsg.LoseCause = []
            }
            if (this.addMsg.InvalidCause.length !='') {
              this.addMsg.InvalidCause = this.addMsg.InvalidCause.split(',').map(Number)
            } else {
              this.addMsg.InvalidCause = []
            }
            this.showMember = []
            this.addMsg.DeptEmpList.forEach(x=>{
              let obj = {
                DeptId: x.Id,
                DeptName: x.Name,
                DataType: x.Type,
              }
              this.showMember.push(obj)
            })
          }
        })
      },
      getCustomerStageList() {
        getCustomerStageList({}).then(res => {
          this.loading = false
          if (res.Code == 1) {
            this.StageList = res.Data;
            this.gettypeoneList = []
            this.StageList.forEach(x => {
              if (x.Type == 1) {
                if (x.IsDefault == 1) {
                  this.addMsg.UseStage.push(x.Id)
                }
                this.gettypeoneList.push(x)
              }
            })
            if (this.gettypeoneList.length > 5) {//阶段数量大于5个的时候
              this.getheight = 71 + Number(this.gettypeoneList.length) * 40
            }
            this.getusestageName()
            if (this.$route.query && this.$route.query.FlowId) {//如果有的话 调接口
              this.FlowId = this.$route.query.FlowId
              this.getdetails()
            }
          }
        })
      },
      getsuccess2(list) {
        this.showMember = list
        this.outerVisible = false
        // this.defaultlist = defaultlist
      },

      stageManagement() {//跳转到阶段管理
        this.$router.push({
          path: '/enterprise/customer/CSChild/stageManagement',

        });
      },
      compare(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
      },
      getusestageName() {
        this.UseStageName = []
        if (this.addMsg.UseStage && this.addMsg.UseStage.length > 0) {
          this.addMsg.UseStage.forEach(x => {
            this.StageList.forEach(j => {
              if (x == j.Id) {
                this.UseStageName.push(j)
              }
            })
          })
          this.UseStageName = this.UseStageName.sort(this.compare('Sort'))
        }


      }
    }
  }
</script>