<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div v-if="stateId==='0'">添加资方产品政策</div>
      <div v-else>资方产品政策</div>
      <div>
        <el-button type="primary" size="small" @click="handleCreate()">保存</el-button>
        <el-button type="info" size="small" @click="handleReturn()">返回</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="dataForm" :model="temp" label-position="right" label-width="190px" class="formadd" :rules="rules">
        <div class="title">资方产品政策</div>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="policyName">
              <span slot="label">政策名称：</span>
              <el-input v-model="temp.policyName" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="brand">
              <span slot="label">品牌：</span>
              <el-autocomplete v-model="temp.brandName" :fetch-suggestions="querySearchAsync" class="addinputw" placeholder="请输入品牌名称" @select="handleSelect">
                <i slot="suffix" class="el-icon-edit el-input__icon" @click="inputclear" />
                <template slot-scope="{ item }">
                  <div style="paddingg:5px;background-color:Azure;">
                    <span>品牌名称：</span>
                    <span style="color:red">{{ item.brandName }}</span><br>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="vehicleModel">
              <span slot="label">车型：</span>
              <el-select v-model="temp.vehicleModel" class="addinputw" filterable placeholder="请选择车型" @click="xuanzhong">
                <el-option v-for="(item,index) in vehicleModelType" :key="index" :label="item.modelName" :value="item.sid" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="manageSid">
              <span slot="label">资方名称：</span>
             <el-select v-model="temp.manageSid" class="addinputw" placeholder="请选择资方名称">
                <el-option v-for="(item,index) in manageNameType" :key="index" :label="item.manageName" :value="item.sid" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="downPayment">
              <span slot="label">首付比例：</span>
              <el-input v-model="temp.downPayment" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="marginRatio">
              <span slot="label">保证金比例：</span>
              <el-input v-model="temp.marginRatio" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="rate">
              <span slot="label">利率：</span>
              <el-input v-model="temp.rate" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="nper">
              <span slot="label">期数：</span>
              <el-input v-model="temp.nper" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
 <!--         <el-col :span="12">
            <el-form-item prop="branchSid">
              <span slot="label">分公司sid：</span>
              <el-input v-model="temp.branchSid" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item prop="discount">
              <span slot="label">厂家贴息：</span>
              <el-input v-model="temp.discount" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item prop="earningsRatio">
              <span slot="label">政策盈利比例：</span>
              <el-input v-model="temp.earningsRatio" maxlength="125" placeholder="" class="addinputw" clearable />
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  listPage,
  SaveList,
  Update,
  deleteBySids,
  details,
  ExportExcel
} from '@/api/jichuxinxi/basefinpolicy'
import { brandLike } from '@/api/jichuxinxi/brandManagement' // 品牌管理模糊查询
import { basefinbankDnamesDown } from '@/api/jichuxinxi/basefinbank' // 资方名称
import { selectDown } from '@/api/jichuxinxi/basevehicle'// 根据品牌sid查询车型下拉框
export default {
  name: 'ZifangzhengceAdd',
  // components: {  },
  data() {
    return {
      // --按钮菜单-------
      menuState: {
        add: false, // 添加
        edit: false, // 编辑
        delete: false, // 删除
        view: false, // 查看
        audit: false, // 审核
        input: false, // 导入
        output: false, // 导出
        upload: false, // 同步
        release: false // 下发
      },
      YongHu: [],
      datass: [],
      sid: '',
      stateId: 0,
      FormLoading: false,
      listLoading: false,
      temp: {}, // 添加和修改
      // templook: {},
      textMap: {
        update: '修改',
        create: '创建'
      },
      // dialogFormVisible: false, // 添加修改对话框状态
      // dialogFormShowVisible: false, // 查看对话框默认关闭状态
      dialogStatus: '', // 对话框状态
      brandType: [],
      manageNameType: [],
      vehicleModelType: [],
      rules: {
        policyName: [
          { required: true, message: '请填写政策名称', trigger: 'blur' }
        ],
        // brand: [{ required: true, message: '请填写品牌', trigger: 'blur' }],
        vehicleModel: [
          // { required: true, message: '请填写车型', trigger: 'blur' }
        ],
        manageName: [
          // { required: true, message: '请填写资方名称', trigger: 'blur' }
        ],
        downPayment: [
          { required: true, message: '请填写首付比例', trigger: 'blur' }
        ],
        marginRatio: [
          { required: true, message: '请填写保证金比例', trigger: 'blur' }
        ],
        rate: [{ required: true, message: '请填写利率', trigger: 'blur' }],
        nper: [{ required: true, message: '请填写期数', trigger: 'blur' }],
        branchSid: [
          { required: true, message: '请填写分公司sid', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请填写厂家贴息', trigger: 'blur' }
        ],
        earningsRatio: [
          { required: true, message: '请填写政策盈利比例', trigger: 'blur' }
        ]
      }
      // ------------------------------------
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles',
      'rolesIds',
      'departmentId',
      'departmentCode'
    ])
  },
  created() {
    // 初始化变量
    this.init()
  },
  methods: {
    init() {
      this.stateId = this.$route.params.id
      // 根据当前用户. 加载当前页面的按钮权限
      // findButtonByUserId(this.$route.path).then(response => {
      //   if (
      //     response.code === 20000 &&
      //   response.data &&
      //   response.data.length > 0
      //   ) {
      //     this.menuState = ConvertMenuState(response.data) // 处理各按钮显示状态
      //   }
      // })
      if (this.stateId !== '0') {
        details(this.stateId).then((response) => {
          if (response.code === '200') {
            this.temp = response.data
            this.chexing(response.data.brand)
            // this.chexing(response.data.vehicleModel)
            console.log(this.temp, 555555555555)
          }
        })
      }
      this.pingpai()
      this.zifangmingcheng()
    },

    // ----------------------------------方法--------------------
    // 品牌
    pingpai() {
      brandLike().then((res) => {
        if (res.code === '200') {
          console.log(res.data, 222)
          this.YongHu = res.data
        }
      })
    },
    handleSelect(e) {
      // 选择：
      console.log('选择qqqqqqqqq：' ,e)
      this.temp.brandName = e.brandName
      this.temp.brand = e.sid
      this.chexing(this.temp.brand)
    },
    // 清空信息
    inputclear() {
      this.temp.brandName = ''
      //   this.temp.brandCode = ''
    },
    // 文本模糊查询
    querySearchAsync(queryString, cb) {
      console.log('查询条件：', queryString)

      if (
        queryString != null &&
        queryString != undefined &&
        queryString !== ''
      ) {
        // this.searchData({ name: queryString })
        brandLike({ name: queryString }).then((response) => {
          if (response.code === '200') {
            this.datass = response.data
            cb(response.data)
          }
        })
      } else {
        console.log(1111111111, this.YongHu)
        this.datass = this.YongHu
        cb(this.YongHu)
      }
    },
    // handleSelect1(e) {
    //   // 选择：
    //   console.log('选择：' ,e)
    //   this.temp.name = e.name
    //   this.sid = e.sid
    // },
    // // 清空信息
    // inputclear1() {
    //   this.temp.brand = ''
    //   //   this.temp.brandCode = ''
    // },
    // // 文本模糊查询
    // querySearchAsync1(queryString, cb) {
    //   console.log('查询条件：', queryString)

    //   if (
    //     queryString != null &&
    //     queryString != undefined &&
    //     queryString !== ''
    //   ) {
    //     // this.searchData({ name: queryString })
    //     namesDown({ name: queryString }).then((response) => {
    //       if (response.code === '200') {
    //         this.manageNameType = response.data
    //         cb(response.data)
    //       }
    //     })
    //   } else {
    //     console.log(1111111111, this.YongHu)
    //     this.manageNameType = this.YongHu
    //     cb(this.YongHu)
    //   }
    // },
    // 资方名称
    zifangmingcheng() {
      basefinbankDnamesDown({ name: this.temp.manageName }).then((res) => {
        if (res.code === '200') {
          console.log(res.data, 66666666666)
          this.manageNameType = res.data
        }
      })
    },
    xuanzhong() {
      if (this.datass.length === 0) {
          this.$notify({
                  title: '提示',
                  message: '请选择品牌后再选择车型',
                  type: 'error',
                  duration: 2000
                })
        }
    },
    // 车型
    chexing(sid1) {
        console.log('车型11111111',sid1)
        var sid ={
            sid:sid1
        }
      selectDown(sid).then((res) => {
        console.log(33333333333, res)
        if (res.code === '200') {
          this.vehicleModelType = res.data
        }
      })
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },

    // 添加前数据初始化
    resetTemp() {
      this.temp = {
        branchSid: '',
        brand: '',
        discount: '',
        downPayment: '',
        earningsRatio: '',
        manageName: '',
        marginRatio: '',
        nper: '',
        policyName: '',
        rate: '',
        vehicleModel: ''
      }
    },
    // 添加数据
    handleCreate() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.FormLoading = true
          this.dialogStatus = 'create'
          if (this.stateId === '0') {
            console.log('传入值:', this.temp)
            // this.temp.brand = this.sid
            SaveList(this.temp).then((response) => {
              console.log('返回值:', response)
              this.FormLoading = false
              if (response.code === '200') {
                this.$notify({
                  title: '提示',
                  message: '添加成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/zifang/zifangzhengce' })
              } else {
                this.$notify({
                  title: '提示',
                  message: '添加失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            this.temp.sid=this.stateId
            console.log(this.temp)
            Update(this.temp).then((response) => {
              this.dialogStatus = 'update'
              console.log('response', response)
              this.FormLoading = false
              if (response.code === '200') {
                this.$notify({
                  title: '提示',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/zifang/zifangzhengce' })
              } else {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error'
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
