<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 16:04:58
-->
<template>
  <div>
    <div class="qtjfjmb-edit-title">
      <b>权利信息</b>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="权利类型编码" prop="qllx">
            <el-input v-model="ruleForm.qllx" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权利类型名称" prop="qllxmc">
            <el-input v-model="ruleForm.qllxmc" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="不动产权类型" prop="bdcqzlx">
            <el-select v-model="ruleForm.bdcqzlx" class="width100" disabled placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打印模板" prop="dymbbs">
            <el-select v-model="ruleForm.dymbbs" class="width100" placeholder="请选择">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="权利其他状况模板" prop="qlqtzk">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.qlqtzk">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="qtjfjmb-edit-title">
        <b>附记内容设置</b>
      </div>
      <ul>
        <li v-for="(item, index) in titleList" @click="handleSelect(index)" :class="{ 'active': n == index }"
          :key="index">{{ item.name }}</li>
      </ul>
      <el-row v-if="n == 0">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.firstreg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 1">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.transferreg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 2">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.changereg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 3">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.logoutreg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 4">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.rivisereg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 5">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.renewalreg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else-if="n == 6">
        <el-col :span="24">
          <el-form-item label="附记模板">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.replacereg">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="text-center">
        <el-button @click="$popupCacel">取消</el-button>
        <el-button type="primary" @click="submitForm" plain>确定</el-button>
      </el-form-item>

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

<script>
  import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
  export default {
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    mounted () {
      if (this.formData.bsmMb) {
        this.$startLoading()
        getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
          this.$endLoading()
          let { result } = res
          this.ruleForm = result ? result : {}
        })
      }
    },
    data () {
      return {
        n: 0,
        ruleForm: {
          qllx: '',
          qllxmc: '',
          bdcqzlx: '',
          dymbbs: '',
          qlqtzk: '',
          firstreg: '',
        },
        options: [
          {
            value: '1',
            label: '不动产权证书'
          },
          {
            value: '2',
            label: '不动产登记证明'
          }
        ],
        options1: [],
        rules: {
          qllx: [
            { required: true, message: '请输入权利类型编码', trigger: 'blur' }
          ],
          qllxmc: [
            { required: true, message: '请输入权利类型名称', trigger: 'blur' }
          ],
          bdcqzlx: [
            { required: true, message: '请选择不动产权类型', trigger: 'change' }
          ],
          dymbbs: [
            { required: true, message: '请输入打印模板', trigger: 'blur' }
          ],
          qlqtztmb: [
            { required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
          ],
        },
        titleList: [
          {
            name: '首次登记'
          },
          {
            name: '转移登记'
          },
          {
            name: '变更登记'
          },
          {
            name: '注销登记'
          },
          {
            name: '更正登记'
          },
          {
            name: '补证登记'
          },
          {
            name: '换证登记'
          }
        ]
      }
    },
    methods: {
      /**
       * @description: handleSelect
       * @param {*} index
       * @author: renchao
       */
      handleSelect (index) {
        this.n = index
      },
      /**
       * @description: submitForm
       * @author: renchao
       */
      submitForm () {
        let that = this
        updateSysSqywmbsz(this.ruleForm).then(res => {
          if (res.code === 200) {
            this.$popupCacel()
            that.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/dialogBoxheader.scss";

  .qtjfjmb-edit-title {
    padding-bottom: 10px;
    border-bottom: 1px solid $borderColor;
    margin-bottom: 10px;
  }

  ul {
    @include flex;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;

    .active {
      background: $light-blue;
      color: #fff;
    }

    li {
      flex: 1;
      line-height: 36px;
      @include flex-center;
      border: 1px solid $borderColor;
      margin-left: -1px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        @extend .active;
      }
    }
  }
</style>