<template>
    <div class="evaluate">
      <CommonInfo :tradeData="tradeData"/>
      <div style="margin: 11px 30px;color: #1890ff;">买方审核</div>
      <el-row style="margin-left:95px" v-if="tradeData.tradeStatus=='6'">
        <el-col :span="24">
          <div >
            <span style="color: #d0d0d0">部门长审核结果</span> 不通过
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-left:95px;padding-top: 15px" v-if="tradeData.tradeStatus=='6'">
        <el-col :span="24">
          <span style="color: #d0d0d0">审核意见</span> {{tradeData.confirmRemark}}
        </el-col>
      </el-row>

      <el-row style="margin-left:95px; padding-top: 20px">
        <el-col :span="8">
          <el-radio v-model="radio" label="1">
            <span style="margin: 0px 5px;">议价</span>
            <el-input v-model="price" placeholder="请输入价格" style="width: 130px" @blur="priceInput" :disabled="priceDisabled"/>
          </el-radio>
        </el-col>
        <el-col :span="8">
          <el-radio v-model="radio" label="2">
            <span style="margin: 0px 5px;">评价</span>
            <el-input v-model="socre"
                      placeholder="请输入评分"
                      style="width: 130px" @blur="socreInput"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null"
                      :disabled="socreDisabled"/>
          </el-radio>
        </el-col>
        <el-col :span="8">
          <span style="margin: 0px 5px">成交价</span>
          <el-input v-model="dealPrice" disabled style="width: 130px"/>
        </el-col>
      </el-row>
      <el-row style="margin-left:95px;padding-top: 20px">
        <el-col :span="8">
          <el-radio v-model="radio" label="3">
            <span style="margin: 0px 5px;">转移支付</span>
          </el-radio>
        </el-col>
      </el-row>
      <el-row style="margin-left:95px;padding-top: 15px" v-show="isShow">
        <el-col :span="10.5">
          <span style="margin-right:5px; line-height: 35px">买方</span>
          <treeselect
            style="width: 235px; float:right"
            v-model="tradeDeptId"
            :options="formDeptOptions"
            :show-count="true"
            placeholder="请选择部门"
          />
        </el-col>
        <el-col :span="13.5">
          <span style="margin: 0px 5px 0px 50px; line-height: 35px">买方经办人</span>
          <el-select v-model="tradeTransactor" placeholder="请选择买方经办人" style="width: 230px; float:right">
            <el-option v-for="item in transactorList"
                       :key="item.userId"
                       :label="item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-left:90px;padding-top: 10px">
        <el-col :span="24">
          <span style="margin: 0px 5px; line-height: 70px">说明</span>
          <el-input v-model="dealRemark" type="textarea" style="width: 590px"/>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
</template>

<script>
  import CommonInfo from "./CommonInfo";
  import { treeselect } from "@/api/system/dept";
  import { selectTransactorByDeptId } from "@/api/system/user";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import moment from "moment";
    export default {
      name: "evaluate",
      props:{
        tradeData: {
          type: Object
        }
      },
      components:{
        CommonInfo,
        Treeselect
      },
      data(){
        return{
          radio:"2",
          priceDisabled: true,
          socreDisabled: false,
          socre: this.tradeData.tradeScore,
          price: this.tradeData.price,
          dealPrice: this.tradeData.dealPrice,
          dealRemark: this.tradeData.dealRemark,
          tradeDeptId: null,
          tradeStatus: "1",
          tradeTransactor: null,
          formDeptOptions: [],
          transactorList: [],
          isShow: false,
        }
      },
      created() {
        this.getTreeselect();
      },
      watch:{
        radio(newVal,oldVal){
          this.price = "";
          this.socre = "";
          this.dealPrice = "";
          if(newVal == '1'){
            this.tradeStatus = "1";
            this.priceDisabled = false;
            this.socreDisabled = true;
            this.isShow = false;
            this.tradeDeptId = null;
            this.tradeTransactor = null;
          }
          if(newVal == '2'){
            this.tradeStatus = "1";
            this.priceDisabled = true;
            this.socreDisabled = false;
            this.isShow = false;
            this.tradeDeptId = null;
            this.tradeTransactor = null;
          }
          if(newVal == '3'){
            this.tradeStatus = "0";
            this.priceDisabled = true;
            this.socreDisabled = true;
            this.isShow = true;
          }
        },
        "tradeDeptId":{
          handler(newValue, oldValue){
            this.getTransactor();
          },
          deep: true,
        },
      },
      methods:{
        /** 查询部门下拉树结构 */
        getTreeselect() {
          treeselect().then((response) => {
            this.formDeptOptions = response.data;

            // 买方不能选自己部门
            var items = this.formDeptOptions[0].children;
            var result = [];
            var j=0;
            for(var i=0; i<items.length; i++){
              if(items[i].id != this.$store.state.user.deptId && items[i].id != this.tradeData.applyDeptId){
                result[j] = items[i];
                j++;
              }
            }
            this.formDeptOptions[0].children = result;
            console.log("formDeptOptions===",this.formDeptOptions);
          });
        },
        getTransactor() {
          if(this.count > 0){
            this.tradeTransactor = null;
          }
          if (this.tradeDeptId && this.tradeDeptId != null) {
            selectTransactorByDeptId({ deptId: this.tradeDeptId }).then(
              (res) => {
                this.transactorList = res.data;
                this.count++;
              }
            );
          }
        },
        //议价
        priceInput(){
          this.dealPrice = this.price;
        },
        socreInput(){
          this.dealPrice = this.tradeData.tradeTotal * this.socre / 100;
        },
        resetSuggestion(){
          this.price = "";
          this.socre = "";
          this.dealPrice = "";
          this.dealRemark="";
        },
        checkParam(){
          console.log("this.radio",this.radio);
          console.log("this.dealPrice",this.dealPrice);
          console.log("this.tradeDeptId",this.tradeDeptId);
          console.log("this.tradeTransactor",this.tradeTransactor);
          console.log("this.tradeData.changeCount",this.tradeData.changeCount);
          if(this.radio!='3' && !this.dealPrice){
            this.$message.error("请检查评价信息！")
            return true;
          }else if(this.radio=='3' && (!this.tradeDeptId || !this.tradeTransactor) && this.tradeData.changeCount<3){
            this.$message.error("请检查转移支付信息！")
            return true;
          } else if(this.radio=='3' && this.tradeData.changeCount>=3){
            this.$message.error("转移支付已满3次，具体信息请查看详情！")
            return true;
          }
          return false;
        },
        submitSuggestion(){
          let param = {tradeId:this.tradeData.tradeId,tradeStatus:this.tradeStatus,dealPrice:this.dealPrice,dealRemark:this.dealRemark,evaluateTime:moment().format('YYYY-MM-DD HH:mm:ss'),
                       tradeDeptId:this.tradeDeptId, tradeTransactor:this.tradeTransactor};
          if(this.socre){
            param.tradeScore = this.socre;
          }else{
            param.tradeScore = -1;
          }
          return param;
        }
      }
    }
</script>

<style scoped lang="scss">

  .evaluate{
    height: 460px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

  }

</style>
