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

<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.key"
          readonly
          @click="choice.select(item)"
          v-bind="item._config"
        />
        <van-field
          v-if="item.type === 'radio'"
          :label="item.label"
          v-bind="item._config"
          :key="item.key"
          :name="item.name"
        >
          <template #input>
            <van-radio-group v-model="form[item.key]" direction="horizontal">
              <van-radio
                v-for="option in item.options"
                :key="option.name"
                :name="option.hasOwnProperty('value')?option.value:option.name"
                >{{ option.name }}</van-radio
              >
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="item.type === 'checkbox'"
          :label="item.label"
          v-bind="item._config"
          :key="item.key"
        >
          <template #input>
            <template v-if="item.options.length == 1">
              <van-checkbox v-model="form[item.key]" shape="square">
                {{ item.options[0].name }}
              </van-checkbox>
            </template>
            <van-checkbox-group
              v-else
              v-model="form[item.key]"
              direction="horizontal"
            >
              <van-checkbox
                v-for="option in item.options"
                :key="option.name"
                :name="option.name"
                shape="square"
              >
                {{ option.name }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
      </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: "详细地址不能为空",
                  },
                ],
              },
            },
            {
              label: "经营状态",
              key: "businessStatus",
              type: "radio",
              options: [{ name: "自营" }, { name: "租赁" }],
              _config: {
                required: true,
                placeholder: "请选择经营状态",
                rules: [
                  {
                    required: true,
                    message: "请选择经营状态",
                  },
                ],
              },
            },
            {
              label: "是否为物业",
              key: "propertyManagement",
              type: "radio",
              options: [
                { name: "是", value: 1 },
                { name: "否", value: 0 },
              ],
              _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,
              },
            },
          ],
        },
      },
    };
  },
  watch: {
    type: {
      handler(newVal, oldVal) {
        console.log(111);
        this.initData[newVal].columns.forEach((val) => {
          if (val.hasOwnProperty("defaultValue")) {
            // this.form[val.key] = val.defaultValue;
            this.$set(this.form, val.key, val.defaultValue);
          }
        });
      },
      immediate: 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() {
      console.log(this.form);
      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((res) => {
          if (this.type === "project") {
            this.form.projectId = res.data;
          }
          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>
