<!-- 新建项目/新建楼宇-->

<template>

  <div class="project-component">

    <LHeader :text="initData[type].title" :customBack="pageDestory"></LHeader>

    <van-form
      @submit="onSubmit"
      :scroll-to-error="true"
      :show-error="false"
      validate-trigger="onSubmit"
    >

      <template v-for="item in initData[type].columns">

        <van-field
          v-if="item.type === 'input'"
          :name="item.name"
          :label="item.label"
          v-model="form[item.key]"
          :key="item.name"
          v-bind="item._config"
          @click="fieldClick(item)"
        />

        <van-field
          v-if="item.type === 'select'"
          :name="item.name"
          :label="item.label"
          :value="form[item.key]"
          :key="item.name"
          readonly
          @click="choice.select(item)"
          v-bind="item._config"
        />

      </template>

      <!-- 选择层 -->

      <van-popup v-model="choice.visible" position="bottom">

        <van-picker
          show-toolbar
          value-key="name"
          :columns="choice.columns"
          @confirm="choice.confirm"
          @cancel="choice.cancel"
        />

      </van-popup>

      <div class="action-btns">

        <van-button
          class="confirm-btn"
          :loading="loadingStatus"
          :loading-text="loadingText"
          round
          block
          type="info"
          native-type="submit"
        >
          保存
        </van-button>

        <van-button class="cancel-btn" round block type="warning" @click="pageDestory">
          取消
        </van-button>

      </div>

    </van-form>
    <!-- 选择项目小组 -->
      <van-popup
        v-model="dept.visible"
        position="bottom"
        :style="{ height: '100%' }"
      >
        <div
          class="van-picker__toolbar"
          style="position: absolute;width: 100%;top: 0;"
        >
          <button
            type="button"
            class="van-picker__cancel"
            @click="dept.close"
          >
            取消</button
          ><button type="button" class="van-picker__confirm" @click="dept.confirm">
            确认
          </button>
        </div>
        <div style="display:flex;margin-top: 44px;">
          <selectDept ref="selectDeptRef"></selectDept>
        </div>
      </van-popup>
  </div>

</template>

<script>
import LHeader from "@/components/header.vue";
import { postFun } from "@/service/table";
import selectDept from "@/components/selectDept/index.vue";
export default {
  components: {
    LHeader,
     selectDept,
  },
  props: {
    type: {
      /* type:project,building */
      type: String,
      default: "building"
    },
    projectId:{
        type:Number,
    }
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: "保存中...",
      form: {},
      dept:{
        visible:false,
        select:this.deptSelect,
        close:this.deptClose,
        confirm:this.deptConfirm
      },
      choice: {
        key: "",
        visible: false,
        columns: [],
        confirm: this.choiceConfirm,
        select: this.choiceSelect,
        cancel: this.choiceCancal
      },
      initData: {
        project: {
          title: "新建项目",
          fetchUrl: "/risk/plan/project",
          columns: [
            {
              label: "项目名称",
              key: "name",
              type: "input",
              _config: {
                required: true,
                placeholder: "请输入项目名称",
                rules: [
                  {
                    required: true,
                    message: "项目名称不能为空"
                  }
                ]
              }
            },
            {
              label: "项目类型",
              key: "type",
              type: "select",
              options: [
                {
                  name: "地产"
                },
                {
                  name: "土地"
                },
                {
                  name: "其他"
                }
              ],
              _config: {
                required: true,
                placeholder: "请选择项目类型",
                rules: [
                  {
                    required: true,
                    message: "项目类型不能为空"
                  }
                ]
              }
            },
            {
              label: "所属单位",
              key: "deptName",
              type: "input",
              method:this.projectDeptEvent,
              _config: {
                required: true,
                readonly:true,
                placeholder: "请输入所属单位",
                rules: [
                  {
                    required: true,
                    message: "所属单位不能为空"
                  }
                ]
              },
             
            },
            {
              label: "所在城市",
              key: "city",
              type: "input",
              _config: {
                required: true,
                placeholder: "请输入所在城市",
                rules: [
                  {
                    required: true,
                    message: "所在城市不能为空"
                  }
                ]
              }
            },
            {
              label: "详细地址",
              key: "address",
              type: "input",
              _config: {
                required: true,
                placeholder: "请输入详细地址",
                rules: [
                  {
                    required: true,
                    message: "详细地址不能为空"
                  }
                ]
              }
            }
          ]
        },
        building: {
          title: "新建楼宇",
          fetchUrl: "/risk/plan/building",
          columns: [
            {
              label: "楼宇名称",
              key: "name",
              type: "input",
              _config: {
                rules: [{ required: true, message: "楼宇名称不能为空" }],
                placeholder: "请输入楼宇名称",
                required: true
              }
            },
            {
              label: "资产类型",
              key: "type",
              type: "select",
              options: [
                { name: "地产" },{ name: "土地" },{ name: "其他" },
              ],
              _config: {
                rules: [{ required: true, message: "资产类型不能为空" }],
                placeholder: "请选择资产类型",
                required: true
              }
            },
            {
              label: "地上楼层几层",
              key: "groundFloor",
              type: "input",
              _config: {
                type: "number",
                rules: [{ required: true, message: "地上楼层几层不能为空" }],
                placeholder: "请输入地上楼层几层",
                required: true
              }
            },
            {
              label: "地下楼层几层",
              key: "undergroundFloor",
              type: "input",
              _config: {
                type: "number",
                rules: [{ required: true, message: "地下楼层几层不能为空" }],
                placeholder: "请输入地下楼层几层",
                required: true
              }
            },
            {
              label: "用途",
              key: "useto",
              type: "select",
              options: [
                { name: "地产" },{ name: "土地" },{ name: "其他" },
              ],
              _config: {
                rules: [{ required: true, message: "用途不能为空" }],
                placeholder: "请选择用途",
                required: true
              }
            },
            {
              label: "所在城市",
              key: "city",
              type: "input",
              _config: {
                rules: [{ required: true, message: "所在城市不能为空" }],
                placeholder: "请输入所在城市",
                required: true
              }
            },
            {
              label: "详细地址",
              key: "address",
              type: "input",
              _config: {
                rules: [{ required: true, message: "详细地址不能为空" }],
                placeholder: "请输入详细地址",
                required: true
              }
            }
          ]
        }
      }
    };
  },
  methods: {
    /* 作为载体处理方法 */
    fieldClick(item){
        if(item.method){item.method()}
    },
    deptClose(){
        this.dept.visible = false;
    },
    deptConfirm(){
        const selectDeptRef = this.$refs.selectDeptRef;
        this.form.deptId = selectDeptRef.result;
        this.form.deptName = selectDeptRef.resultName;
        this.dept.close()
    },
    choiceConfirm(val) {
      this.form[this.choice.key] = val.name;
      this.choice.cancel();
    },
    projectDeptEvent(){
        this.dept.visible = true
    },
    choiceCancal() {
      this.choice.visible = false;
      this.choice.key = "";
      this.choice.columns = [];
    },
    choiceSelect(item) {
      this.choice.visible = true;
      this.choice.key = item.key;
      this.choice.columns = item.options;
    },
    /* 点击返回、点击取消 */
    pageDestory(){
        this.choiceCancal()
        this.$emit('close')
    },
    onSubmit() {
      this.loadingStatus = true;
      if(this.type==='building'){
        if(!this.projectId){
            this.$toast("保存失败，未获取到项目Id");
            return;
        }
        this.form.projectId = this.projectId;
      }
      postFun(this.initData[this.type].fetchUrl,this.form)
        .then(() => {
            setTimeout(() => {
                this.loadingStatus = false;
                this.$toast("保存成功");
                this.$emit("confirm",this.form)
            }, 2000);
        }).catch(()=>{
             this.loadingStatus = false;
            this.$toast("保存失败");
        })
    }
  }
};
</script>

<style lang="less" scoped>

.project-component {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  .van-form{
    height: calc(100vh - 1.6rem);
    overflow: auto;
}
.action-btns {
  margin-top: 1rem;
  padding: 0 0.5rem;
  .cancel-btn {
    margin-top: 0.3rem;
  }
}
}
</style>
