<template>
  <div>
    <el-button size="small" type="primary" @click="dialogFormVisible = true">添 加</el-button>
    <el-drawer
        title="添加关联竞争对手"
        :visible.sync="dialogFormVisible"
        size="600px"
        direction="rtl"
        :show-close="false"
        append-to-body
        @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" label-width="90px">
            <el-col :span="24">
              <el-form-item  label="企业名称:" prop="enterprisename">
                <el-popover
                    placement="bottom"
                    width="580"
                    trigger="click"
                    v-model="enterpriseShow"
                    @show="enterpriseList">
                  <el-input  style="width:200px;" placeholder="搜索" :suffix-icon="enterpriseParam.content.where.condition?enterpriseParam.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="enterpriseParam.content.where.condition" @keyup.native.enter="enterpriseList(enterpriseParam.content.pageNumber = 1)" @clear="enterpriseList(enterpriseParam.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
                  </el-input>
                  <el-table :data="enterprise.enterpriseData" @row-click="enterpriseData" height="400px">
                    <el-table-column
                        label="品牌名称"
                        width="180">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.brandname?scope.row.brandname:'--' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="企业名称"
                        width="180">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.enterprisename?scope.row.enterprisename:'--' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="优势信息"
                        width="300">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.advantage?scope.row.advantage:'--' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="劣势信息"
                        width="300">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.industry?scope.row.industry:'--' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="备注"
                        width="300">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.remarks?scope.row.remarks:'--' }}</span>
                      </template>
                    </el-table-column>
                    <!--                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="60">
                                          <template slot-scope="scope">
                                            <el-button type="text" @click="projectData(scope.row)">选择</el-button>
                                          </template>
                                        </el-table-column>-->
                  </el-table>
                  <div class="container normal-panel" style="text-align:right">
                    <el-pagination
                        background
                        small
                        @size-change="handleSizeChangeProject"
                        @current-change="handleCurrentChangeProject"
                        :current-page="enterprise.currentPage"
                        :total="enterprise.total">
                    </el-pagination>
                  </div>
                  <el-input slot="reference" readonly  v-model="form.enterprisename" autocomplete="off" placeholder="请选择企业名称"   @input="selectEnterprise"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="品牌名称:">
                <el-input  autosize v-model="form.brandname" placeholder="品牌名称" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="主要威胁:">
                <el-radio-group v-model="form.important">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="优势信息:">
                <el-input  autosize v-model="form.advantage" placeholder="优势信息" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="劣势信息:" >
                <el-input  autosize v-model="form.inferiority" placeholder="劣势信息" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="备注:" >
                <el-input  autosize v-model="form.remarks" placeholder="备注" ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "add",
  props:["data"],
  data(){
    return {
      enterpriseShow:false,
      dialogFormVisible:false,
      enterprise:{
        enterpriseData:[],
        total:0,
        currentPage:0,
      },
      enterpriseParam:{
        "content": {
          "isExport": false,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": "",
            "tablefilter": {},
            "sa_projectid": ''//不传差全部，传过滤掉对应项目中的数据
          }
        },
        "id": 20221018164302,
      },
      form:{
        "enterprisename":'',
        "brandname":'',
        "industry":'',
        "sa_project_competeid": 0,
        "sa_projectid": 1, //工程项目表ID
        "contactsid": '', //可不传
        "sa_competitorid": 0, //竞争对手ID
        "important": 0, //主要威胁 0/1
        "advantage": "",
        "inferiority": "",
        "remarks": ""
      },
      rules:{
        enterprisename:[
          { required: true, message: '还未选择企业', trigger: 'change' },
        ]
      }
    }
  },
  methods:{
    /*可选企业列表*/
    async enterpriseList(){
      this.enterpriseParam.content.where.sa_projectid = this.data.sa_projectid
      const res = await this.$api.requested(this.enterpriseParam)
      this.enterprise.enterpriseData = res.data
      this.enterprise.total = res.total
      this.enterprise.currentPage = res.pageNumber
      console.log(res)
    },
    selectEnterprise(){
      this.enterpriseParam.content.where.condition = this.form.enterprisename
      this.enterpriseList()
    },
    enterpriseData(val){
      this.form = Object.assign({},this.form,val)
      this.enterpriseShow = false
    },
    onSubmit(){
      this.form.sa_projectid = this.data.sa_projectid
      console.log(this.form)
      this.$refs.form.validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": 20221019165802,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          this.$refs.form.resetFields()
          this.form = {
            "enterprisename":'',
            "brandname":'',
            "industry":'',
            "sa_project_competeid": 0,
            "sa_projectid": '', //工程项目表ID
            "contactsid": '', //可不传
            "sa_competitorid": '', //竞争对手ID
            "important": 0, //主要威胁 0/1
            "advantage": "",
            "inferiority": "",
            "remarks": ""
          }
          this.$emit("addSuccess")
        })
      })
    },
    onClose(){
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
      this.form = {
        "enterprisename":'',
        "brandname":'',
        "industry":'',
        "sa_project_competeid": 0,
        "sa_projectid": '', //工程项目表ID
        "contactsid": '', //可不传
        "sa_competitorid": '', //竞争对手ID
        "important": 0, //主要威胁 0/1
        "advantage": "",
        "inferiority": "",
        "remarks": ""
      }
    },
    /*企业分页*/
    handleSizeChangeProject(val) {
      // console.log(`每页 ${val} 条`);
      this.enterpriseParam.content.pageSize = val
      this.projectList()
    },
    handleCurrentChangeProject(val) {
      // console.log(`当前页: ${val}`);
      this.enterpriseParam.content.pageNumber = val
      this.projectList()
    },
  }
}
</script>

<style scoped>

</style>