<template>
  <div>
    <el-button type="text" size="mini" @click="onShow" :disabled="!tool.checkAuth($route.name,'assessManage') || !disabled">评 估</el-button>
<!-- 选择客户对象 -->
    <el-drawer
        title="选择客户对象"
        :visible.sync="drawer"
        size="45%"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="drawer__panel">
        <layoutTable :layout="tablecols" :data="list"  :custom="true" :checkbox="true" @checkboxCallBack="checkboxCallBack">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'province'">
              {{scope.column.data.province?scope.column.data.province + '-' + scope.column.data.city + '-' + scope.column.data.county:'--'}}
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
          </template>
        </layoutTable>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width" :disabled="selectData.length === 0">下一步</el-button>
      </div>
    </el-drawer>
<!-- 编辑操作 -->
    <el-drawer
        title="编辑"
        :visible.sync="drawerEdit"
        size="600px"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="drawer__panel" style="margin-bottom: -20px !important;">
        <el-row>
          <el-form  size="mini" label-position="left" >
            <el-col :span="24">
              <el-form-item label="工作内容"  label-width="75px">
<!--                <el-input v-model="data.taskname" autocomplete="off" placeholder="输入阶段名称"></el-input>-->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item style="margin-top: -20px">
                <span>{{rowData.taskname}}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="drawer__panel" style="margin-bottom: -20px !important">
        <el-row>
          <el-form :model="formData" :rules="rules" ref="formData"  size="mini" label-position="left" label-width="95px">
            <el-col :span="24">
              <el-form-item label="评估内容"  prop="select">
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="rowData.partiestype.length !== 0">
              <div v-for="(item,index) in form" :key="index" style="width: 100%;margin-top: -10px;margin-bottom: 20px">
                <el-tag type="warning" size="mini" style="margin-right: 10px;margin-bottom: 10px">{{item.type}}</el-tag>
                <span style="font-size: 14px;!important;">{{item.enterprisename}}</span>
                <div style="width: 100%;margin-bottom: 10px;">
                  <el-radio-group v-model="item.checkedscore" v-for="(radio,index) in item.option" :key="index" @change="radioChange(item,radio)" style="width: 100%">
                    <el-radio :label="radio" style="width: 100% !important;margin-bottom: 10px">
                      <span>
                        {{radio.optionname}}
                      </span>
                      <div>
                        <span class="remarks-color" >{{radio.remarks}}</span>
                      </div>

                    </el-radio>
                  </el-radio-group>
              </div>
              </div>
            </el-col>
            <el-col :span="24" v-if="rowData.partiestype.length === 0">
              <el-radio-group v-model="form.checkedscore" v-for="(radio,index) in form" :key="index" @change="radioChange(form,radio)" style="width: 100%">
                <el-radio :label="radio" style="width: 100% !important;margin-bottom: 20px">
                  {{radio.optionname}}
                  <span class="remarks-color">{{radio.remarks}}</span>
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="drawer__panel" style="margin-bottom: -20px !important">
        <el-row>
          <el-form  size="mini" label-position="right" >
            <el-col :span="24">
              <el-form-item label="评估说明"  label-width="75px">
              </el-form-item>
            </el-col>
            <el-col :span="24" >
              <el-form-item style="margin-top: -10px">
                <el-input v-model="actionnotes" type="textarea" rows="5" autocomplete="off" placeholder="输入评估内容"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawerEdit = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="saveSubmit" class="normal-btn-width">保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import layoutTable from '@/components/table/index2'
export default {
  name: "edit",
  props:["data","rowData","disabled"],
  components:{layoutTable},
  data(){
    return {
      drawer:false,
      drawerEdit:false,
      tablecols:[],
      list:[],
      selectCustomer:[],
      selectData:[],
      listR:'',
      actionnotes:'',
      param:{
        "id": 20221129152204,
        "content": {
          "sa_projectid": '',
          "sa_projtaskmagid": '',
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      },
      form:[],
      formData:{
        select:0
      },
      rules:{
        select: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
        ],
      },
      radioSelect:[]
    }
  },
  methods:{
    onClose(){

    },
    onSubmit(){
      this.drawer = false
      this.drawerEdit = true
      this.taskData()
    },
    async saveSubmit(){
      const res = await this.$api.requested({
        "id": "20221128145004",
        "content": {
          "sa_projectid": this.data.sa_projectid,
          "sa_projtaskmagid": this.rowData.sa_projtaskmagid,
          "sa_projstagemagid": this.rowData.sa_projstagemagid,
          "actionnotes":this.actionnotes,
          "option": this.radioSelect
        }
      })
      this.tool.showMessage(res,()=>{
        this.drawerEdit = false
        this.$emit("editSuccess")
      })
    },
    onShow(){
      console.log(this.rowData.partiestype.length)
      if (this.rowData.partiestype.length !== 0){
        this.drawer = true
        console.log(this.rowData,"列表工作id")
        console.log(this.form)
        this.listData()
      }else {
        this.drawerEdit = true
        this.taskData()
      }

    },
    /*选择关联客户*/
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
    },
    /*获取工作任务明细*/
    async taskData(){
      const res = await this.$api.requested({
        "id": 20221129152304,
        "content": {
          "sa_projtaskmagid": this.rowData.sa_projtaskmagid,
          "sa_projstagemagid": this.rowData.sa_projstagemagid,
          "sa_project_partiesids": this.selectData
        }
      })
      console.log(res,"工作任务明细")
      this.form = res.data
    },
    checkboxCallBack(val){
      this.selectData = []
      console.log(val)
      this.selectCustomer = val
      val.forEach((item,index) => {
        this.selectData[index] = item.sa_project_partiesid
      })
    },
    radioChange(item,radio){
      this.radioSelect = this.radioSelect.filter(e=>{
        return e.sa_project_partiesid !== item.sa_project_partiesid
      })
      if (this.rowData.partiestype.length === 0){
        this.radioSelect = []
        this.radioSelect.push({
          "sa_projtaskmag_optionsid": radio.sa_projtaskmag_optionsid,
          "sa_project_partiesid": 0,
          "score":radio.score
        })
      }else {
        this.radioSelect.push({
          "sa_projtaskmag_optionsid": radio.sa_projtaskmag_optionsid,
          "sa_project_partiesid": item.sa_project_partiesid,
          "score":radio.score
        })
      }
      console.log(this.radioSelect,"获取单选结果1")
    },
  },
  created() {
    this.param.content.sa_projectid = this.data.sa_projectid
    this.param.content.sa_projtaskmagid = this.rowData.sa_projtaskmagid
    this.tablecols = this.tool.tabelCol(this.$route.name).customerTable.tablecols
  }
}
</script>

<style scoped>
  .remarks-color{
    color:#c0c4cc;
    margin-left: 10px;
    font-size: 10px;
  }
</style>