<template>
  <div>
    <el-dialog
    :visible.sync="isShow"
    @close="$emit('update:isShow',false)"
    :modal-append-to-body='false'
    width="652px"
    title="确认不续约">
      <div class="dialog-box">
        <el-form :model="labelForm" ref="confirmNoRenewalFormRef">
          <el-form-item prop="reason" :rules="{required:true,message:'不续约归因不能为空',trigger:'change'}">
            <div style="display: flex;align-items: center;justify-content: space-between;">
              <el-select v-model="labelForm.reason" placeholder="不续约归因" style="width: 424px;">
                <el-option :label="item.AscribeContent" :value="item.CompanyAscribeId" v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
              </el-select>
              <span class="create-reason" @click="createReason">新建</span>
            </div>
          </el-form-item>
          <el-form-item prop="detailReason" :rules="{required:true,message:'详细原因不能为空',trigger:'blur'}">
            <el-input v-model="labelForm.detailReason" placeholder="请描述详细原因" type="textarea"
            style="width: 505px;" :rows="9"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="$emit('update:isShow',false)" class="dialog-footer-button">取消</el-button>
          <el-button @click="save" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
    :visible.sync="createReasonShow"
    @close="resetReasonForm"
    :modal-append-to-body='false'
    width="652px"
    title="新建归因">
      <div class="dialog-box">
        <el-form :model="remarkForm" ref="confirmReasonRef">
          <el-form-item prop="AscribeContent" :rules="{required:true,message:'归因不能为空',trigger:'blur'}">
            <el-autocomplete class="autocomplete-input" v-model.trim="remarkForm.AscribeContent" 
            :fetch-suggestions="querySearch" placeholder="请输入归因名称"></el-autocomplete>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="createReasonShow=false" class="dialog-footer-button">取消</el-button>
          <el-button @click="saveReason" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { dataMainInterface } from '@/api/api.js'

  export default{
    props:{
      isShow:{
        type:Boolean,
        required:true
      },
      dataForm:{
        type:Object,
        required:true
      },
      noRenewalReasonList:{
        type:Array,
        required:true
      }
    },
    watch:{
      isShow(value){
        if(value){
          this.labelForm.reason = this.dataForm.reason
          this.labelForm.detailReason = this.dataForm.detailReason
          this.$nextTick(()=>{
            this.$refs.confirmNoRenewalFormRef && this.$refs.confirmNoRenewalFormRef.clearValidate()
          })
        }
      }
    },
    computed: {
      Role() {
        let role = localStorage.getItem('Role') || '';
        return role;
      },
      //确认未续约权限
      canConfirmNotRenewed(){
        return ['admin','rai_admin'].includes(this.Role)
      }
	  },
    data() {
      return {
        remarkForm:{
          AscribeContent:''
        },
        labelForm:{
          reason:'',
          detailReason:''
        },
        createReasonShow:false
      }
    },
    methods: {
      createReason(){
        this.createReasonShow=true
      },
      resetReasonForm(){
        this.remarkForm.AscribeContent=""
        this.$refs.confirmReasonRef.clearValidate()
      },
      querySearch(queryString,cb){
        if(!queryString){
          cb(this.noRenewalReasonList.map(item => {
            return {value:item.AscribeContent}
          }))
        }else{
          // dataMainInterface.getAscribList({KeyWord:queryString}).then(res=>{
          //   if(res.Ret == 200){
          //     let suggestionsReason = res.Data.List || []
          //     cb(suggestionsReason.map(item => {
          //       return {value:item.AscribeContent}
          //     }))
          //   }
          // }).catch(()=>{
          //   cb([])
          // })
          cb(this.noRenewalReasonList.map(item => {
            if(item.AscribeContent.indexOf(queryString)!=-1){
              return {value:item.AscribeContent}
            }
          }).filter(Boolean))
        }
      },
      saveReason(){
        this.$refs.confirmReasonRef.validate(valid=>{
          if(valid){
            this.remarkForm.AscribeContent=this.remarkForm.AscribeContent.replace(/\s*/g,"")
            dataMainInterface.addAscrib({AscribeContent:this.remarkForm.AscribeContent})
            .then(res=>{
              if(res.Ret ==200){
                this.$message.success("新建成功")
                this.createReasonShow=false
                this.$emit("refreshReasonList")
              }
            })
          }
        })
      },
      save(){
        if((this.Role!='rai_admin' && this.dataForm.reason) || (!this.canConfirmNotRenewed)){
          this.$message.error("仅管理员可修改")
          return 
        }
        this.$refs.confirmNoRenewalFormRef.validate(valid=>{
          if(valid){
            this.$emit("saveLabel",{CompanyAscribeId:this.labelForm.reason,Content:this.labelForm.detailReason})
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .dialog-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .create-reason{
      cursor: pointer;
      color: #409EFF;
      font-size: 14px;
      margin-right: 20px;
    }
    .dialog-footer{
      margin: 30px 0;
      .dialog-footer-button{
        height: 40px;
        width: 120px;
      }
    }
  }
</style>
<style lang="scss">
.autocomplete-input{
  .el-input{
    width: 505px;
  }
}

</style>