<template>
  <div>
    <el-button size="mini" type="primary" @click="dialogFormVisible = true">添 加</el-button>
    <el-drawer title="添加经销商" size="70%" append-to-body :show-close="false" :visible.sync="dialogFormVisible">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="90px" label-position="right" size="mini">
            <el-col :span="24">
              <el-form-item label="经销商" prop="remarks">
                <el-input  style="width:200px;margin-bottom: 20px" placeholder="搜索" :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="params.content.where.condition" @keyup.native.enter="getEnterpriseData(params.content.pageNumber = 1)" @clear="getEnterpriseData(params.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
                </el-input>
                <selectEnterpise v-if="dialogFormVisible" @selectChange="selectChange" idName="sys_enterpriseid" ref="table" v-model="result" :layout="tablecols" :data="list" :custom="true" height="500px"  @upDateData="upDateData">
                  <template v-slot:customcol="scope">
                    <div v-if="scope.column.columnname == 'province'">
                      {{scope.column.data.province}}-{{scope.column.data.city}}-{{scope.column.data.county}}
                    </div>
                    <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
                  </template>
                </selectEnterpise>
                <div class="container normal-panel" style="text-align:right">
                  <el-pagination
                      style="text-align:right"
                      background
                      small
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="params.content.pageNumber"
                      :page-size="params.content.pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible=false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogFormVisible2 = true" class="normal-btn-width">下 一 步</el-button>
      </div>
    </el-drawer>
    <el-drawer title="信息配置" size="60%" append-to-body :show-close="false" :visible.sync="dialogFormVisible2">
      <div class="drawer__panel">
        <el-table
          :data="selectArr"
          size="small"
          stripe
          style="width: 100%"
          height="300"
          border>
          <el-table-column
            prop="enterprisename"
            label="经销商名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sa_accountclassid"
            label="账户类型"
            width="250">
            <template slot-scope="scope">
              <el-select size="small" @focus="accountSelect(scope.row)" v-model="scope.row.sa_accountclassid" placeholder="请选择账户类型">
                <el-option
                  v-for="item in accountList"
                  :key="item.sa_accountclassid"
                  :label="item.accountname"
                  :value="item.sa_accountclassid">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="creditquota"
            label="信用额度">
            <template slot-scope="scope">
              <el-input type="text" size="small" placeholder="额度" v-model.number="scope.row.creditquota"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              prop="remarks"
              label="备注">
            <template slot-scope="scope">
              <el-input type="text" size="small" placeholder="备注" v-model.number="scope.row.remarks"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible2=false" 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>
import selectEnterpise from '@/components/selectTable/index'
export default {
  data () {
    return {
      dialogFormVisible:false,
      dialogFormVisible2:false,
      accountList:[],
      form:{
    
      },
      rules:{
      },
      result:'',
      tablecols:[],
      list:[],
      total:0,
      params: {
        "id": "20221008164103",
        "version":1,
        "content": {
          "pageSize":20,
          "pageNumber":1,
          "where":{
              "condition":""
          }
        }
      },
      accountParam: {
        "id": "20221008164203",
        "version":1,
        "content": {
          "sys_enterpriseid":'',
          "sa_creditbillid":this.$route.query.id
        }
      },
      selectArr:[]
    }
  },
  components:{selectEnterpise},
  methods:{
    // /* 获取企业档案 */
    async getEnterpriseData() {
      let res = await this.$api.requested(this.params)
      this.total = res.total
      this.list = res.data
      console.log(this.list);
    },
    async getAccountList () {
      this.accountParam.content.sa_creditbillid = this.$route.query.id
      let res = await this.$api.requested(this.accountParam)
      this.accountList = res.data
      console.log(this.accountList);
      
    },
    async onSubmit () {
      let is = this.selectArr.every(item => item.sa_accountclassid && (item.creditquota || item.creditquota === 0))
      if (is) {
        let data = this.selectArr.map(item => {
          return {
            "sa_creditbilldetailid":0,
              "sys_enterpriseid":item.sys_enterpriseid,
              "sa_accountclassid":item.sa_accountclassid,
              "creditquota":item.creditquota,
              "remarks":item.remarks
          }
        })
        const res = await this.$api.requested({
        "id": "20230104100203",
        "version":1,
        "content": {
          sa_creditbillid:this.$route.query.id,
          enterpriseinfos: data
        }
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible2 = false
          this.dialogFormVisible = false
        })
      } else {
        this.$message({
          type:'warning',
          message:'请填写完整信息'
        })
      }
      
    },
    accountSelect (data) {
      console.log('触发');
      
      this.accountParam.content.sys_enterpriseid=data.sys_enterpriseid
      this.getAccountList()
    },
    selectChange (data) {
      this.selectArr = data
    },
    upDateData (data) {
      this.selectArr = data
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getEnterpriseData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getEnterpriseData()
    },
  },
  created() {
    this.getEnterpriseData()
    this.tablecols = this.tool.tabelCol(this.$route.name).addEnterpriseTable.tablecols
  },
  mounted () {
  }
}

</script>
<style scoped>
/deep/.el-select {
  width: 100%!important;
}
</style>