<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.key"
              @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">确定</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.key"
              @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">确定</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.key"
              @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">确定</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.key"
              @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">确定</div>
                <div class="cancels " @click="nowedit = 0" style="">取消</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'Preference',
  components: {

  },
  data() {
    return {
      autosize: {
        minRows: 8,
        maxRows: 8
      },
      queryParams:{

      },
      key:'',
      nowedit: 0
    }
  },
  created() {

  },
  computed: {

  },
  methods: {

  }
}
</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>
