<template>
  <div class="preference">
    <div class="preference-item">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">商务条件特点</span>
        </div>
      </div>
      <div class="query-params">
        <div class="params-item">
          <div class="flex-box item-flex">
            <el-input
              v-model="queryParams.businessCharacteristic"
              @focus="nowedit = 1"
              placeholder="请输入商务条件特点"
              class="textarea"
              type="textarea"
              :autosize="autosize"
              maxlength="500"
              :show-word-limit="true">
            </el-input>
            <div class="flex btns" v-if="nowedit === 1">
              <div class="flex">
                <div class="btnsmall btn_primary" @click="update('businessCharacteristic')">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="preference-item">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">决策链条</span>
        </div>
      </div>
      <div class="query-params">
        <div class="params-item">
          <div class="flex-box item-flex">
            <el-input
              v-model="queryParams.decisionChain"
              @focus="nowedit = 2"
              placeholder="请输入决策链条"
              class="textarea"
              type="textarea"
              :autosize="autosize"
              maxlength="500"
              :show-word-limit="true" >
            </el-input>
            <div class="flex btns" v-if="nowedit === 2">
              <div class="flex">
                <div class="btnsmall btn_primary" @click="update('decisionChain')">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="preference-item">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">招投标流程特点</span>
        </div>
      </div>
      <div class="query-params">
        <div class="params-item">
          <div class="flex-box item-flex">
            <el-input
              v-model="queryParams.bidCharacteristic"
              @focus="nowedit = 3"
              placeholder="请输入招投标流程特点"
              class="textarea"
              type="textarea"
              :autosize="autosize"
              maxlength="500"
              :show-word-limit="true">
            </el-input>
            <div class="flex btns" v-if="nowedit === 3">
              <div class="flex">
                <div class="btnsmall btn_primary" @click="update('bidCharacteristic')">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="preference-item">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">履约阶段特点</span>
        </div>
      </div>
      <div class="query-params">
        <div class="params-item">
          <div class="flex-box item-flex">
            <el-input
              v-model="queryParams.performanceCharacteristic"
              @focus="nowedit = 4"
              placeholder="请输入履约阶段特点"
              class="textarea"
              type="textarea"
              :autosize="autosize"
              maxlength="500"
              :show-word-limit="true">
            </el-input>
            <div class="flex btns" v-if="nowedit === 4">
              <div class="flex">
                <div class="btnsmall btn_primary" @click="update('performanceCharacteristic')">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="preference-item">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">其它管理体系特点</span>
        </div>
      </div>
      <div class="query-params">
        <div class="params-item">
          <div class="flex-box item-flex">
            <el-input
              v-model="queryParams.otherMsCharacteistic"
              @focus="nowedit = 5"
              placeholder="请输入履约阶段特点"
              class="textarea"
              type="textarea"
              :autosize="autosize"
              maxlength="500"
              :show-word-limit="true">
            </el-input>
            <div class="flex btns" v-if="nowedit === 5">
              <div class="flex">
                <div class="btnsmall btn_primary" @click="update('otherMsCharacteistic')">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {
  customerInfo,
  customerUpdate
} from '@/api/detail/party-a/cooperate'
export default {
  name: 'Preference',
  components: {

  },
  props: ['customerIds'],
  data() {
    return {
      autosize: {
        minRows: 8,
        maxRows: 8
      },
      customerId: this.customerIds,
      queryParams:{
        customerId: '',
        businessCharacteristic: '',
        decisionChain: '',
        bidCharacteristic: '',
        performanceCharacteristic: '',
        otherMsCharacteistic: '',
      },
      key:'',
      nowedit: 0
    }
  },
  created() {
    this.customerInfos()
  },
  computed: {

  },
  methods: {
    // 客户详情
    customerInfos(){
      customerInfo(this.customerId).then(res=>{
        this.queryParams = res.data
      })
    },
    // 编辑客户
    update(name){
      let data = {
        customerId: this.customerId,
        [name]: this.queryParams[name],
      }
      customerUpdate(data).then(res=>{
        if(res.data){
          this.$message.success(res.msg)
          this.nowedit = 0
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.preference{
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  .query-params{
    margin-top:20px;
    .params-item{
      width: 100%;
      .el-textarea{
        width: 800px;
        textarea{
          color: rgb(35, 35, 35);
          border-radius: 2px;
          border: 1px solid rgb(217, 217, 217);
          font-size: 14px;
          padding: 10px;
        }
      }
      .item-flex{
        align-items: flex-end;
        .btns{
          .btnsmall{
            width: 56px;
            height: 28px;
            line-height: 28px;
            margin-left: 12px;
          }
          .cancels{
            line-height: 28px;
          }
        }
      }
    }

  }
}
</style>
