<template>
  <el-dialog
    :title="title"
    v-model="visible"
    width="600px"
    append-to-body
    draggable
    @close="close"
  >
    <div style="padding: 8px 24px 16px 24px" v-if="visible">
      <el-form
        size="small"
        ref="priceListRef"
        label-width="100px"
        :model="form"
        :rules="rules"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="选择任务" prop="taskTypeId">
              <el-select
                v-model="form.taskTypeId"
                type="text"
                placeholder="选择任务"
                :clearable="true"
                width="100px"
                @clear="handleTaskClear"
              >
                <el-option
                  v-for="item in taskType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.taskTypeId == 1">
            <el-form-item
              label="是否零申报"
              prop="isZero"
            >
              <el-select
                v-model="form.isZero"
                type="text"
                width="100px"
                placeholder="请选择申报"
              >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="单价"
              prop="price"
              v-if="form.taskTypeId != null"
            >
              <el-input
                v-model="form.price"
                width="100px"
                placeholder="请输入单价"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.taskTypeId != null">
            <el-form-item
              label="年收入"
              prop="annualIncome"
              v-if="form.taskTypeId == 1 && form.taskTypeId != null && form.isZero == 0"
            >
              <el-select
                v-model="form.annualIncome"
                type="text"
                placeholder="年收入"
                :clearable="true"
                width="100px"
              >
                <el-option
                  v-for="item in incomeDefault"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否变更"
              prop="isChanged"
              v-if="form.taskTypeId == 2 || form.taskTypeId == 3"
            >
              <el-select
                v-model="form.isChanged"
                type="text"
                placeholder="是否变更"
                :clearable="true"
                width="100px"
                @clear="clearStatus"
              >
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" v-if="form.taskTypeId != null">
            <el-form-item
              label="备注"
              prop="remark"
              v-if="form.taskTypeId != null"
            >
              <el-input
                type="textarea"
                rows="2"
                v-model="form.remark"
              /> </el-form-item
          ></el-col>
     
        </el-row>
        <el-row :gutter="30"> </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm"
          icon="Finished"
          size="small"
          v-hasPermi="['priceList:priceList:save']"
          >确 定</el-button
        >
        <el-button icon="close" size="small" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
    

  
<script setup>
import {
  getPriceList,
  getTenantList,
  addPriceList,
  updatePriceList,
  getTaskTypeList,
} from "@/api/system/priceList";
import { incomeDefault, yesOrNo } from "@/utils/default";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
/** 表单抽屉 页变量 */
const title = ref("");
const loading = ref(false);
const multiple = ref(true);
const visible = ref(false);
const editStatus = ref(true);
/** 甲方租户 */
const firstParty = ref("");
/** 乙方租户 */
const secondParty = ref("");
const isFullscreen = ref(false);
/** 任务类型 */
const taskType = ref([]);
const webHost = import.meta.env.VITE_APP_BASE_API;
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});

const data = reactive({
  form: {},
  rules: {
    taskTypeId: [
      { required: true, message: "请选择任务类型", trigger: "blur" },
    ],
    price: [{ required: true, message: "单价不能为空", trigger: "blur" }],
    annualIncome: [
      { required: true, message: "年收入不能为空", trigger: "change" },
    ],
    isZero:[
    {required: true, message: "是否零收入不能为空", trigger: "change" },
    ],
    isChanged: [
      {
        required: true,
        message: "是否变更不能为空",
        trigger: "blur",
      },
    ],
  },
});

const { getList } = toRefs(props);
const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id, row) {
  reset();
  visible.value = true;

  console.log("打开", row);
  getTaskTypeList().then((res) => {
    taskType.value = res.data;
    if (id) {
      getPriceList(id).then((response) => {
        console.log(response);
        form.value = response.data;
        form.value.fromAccountName = row.fromAccountName;
        form.value.toAccountName = row.toAccountName;
        title.value = "修改价目信息";
        console.log(form.value);
      });
    } else {
      title.value = "添加价目信息";
    }
  });
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

/** 清除选择任务  */
function handleTaskClear() {
  form.value.taskTypeId = null;
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    price: null,
    taskTypeId: null,
    annualIncome: "",
    isChanged: null,
    fromTenantId: null,
    toTenantId: null,
    remark: null,
    createTime: null,
    creatorId: null,
    updateTime: null,
    updaterId: null,
    deleted: null,
    version: null,
    toAccountName: "",
    fromAccountName: "",
  };
  proxy.resetForm("priceListRef");
}

/** 输入框输出建议 */
const querySearchAsync = (queryString, cb) => {
  const query = { accountName: queryString };
  getTenantList(query).then((res) => {
    cb(res.data);
  });
};

/** 提交按钮 */
function submitForm() {
  proxy.$refs["priceListRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updatePriceList(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          getList.value();
        });
      } else {
        addPriceList(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          getList.value();
        });
      }
    }
  });
}

function clearStatus() {}

/** 查询表单信息  */
function getForm() {
  loading.value = true;
  getPriceList(form.value.id).then((response) => {
    loading.value = false;
    form.value = response.data;
  });
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
  