<template>
  <CustCard>
    <el-form ref="searchRef" :model="searchCondition">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="地块名:" prop="landName">
            <el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="种植产物" prop="crop">
            <el-input v-model="searchCondition.crop" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产权人" prop="owner">
            <el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getList()">查询</el-button>
          <el-button type="" @click="handleResetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="options_btns">
      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
        {{ item.label }}
      </el-button>
    </div>
    <el-table :data="list">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
      <el-table-column label="地址" prop="address" show-overflow-tooltip />
      <el-table-column label="产权人" prop="owner" show-overflow-tooltip />
      <el-table-column label="农用地分类" prop="landClassificationType" show-overflow-tooltip />
      <el-table-column label="面积" prop="978.2" show-overflow-tooltip />
      <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
      <el-table-column label="种植产物" prop="" show-overflow-tooltip />
      <el-table-column label="种子供应商" prop="" show-overflow-tooltip />
      <el-table-column label="年度计划" prop="" show-overflow-tooltip />
      <el-table-column label="种植日期" prop="" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
        <el-button type="primary" @click="doEdit()">编辑</el-button>
        <el-button type="danger" @click="doDel()">删除</el-button>
      </el-table-column>
    </el-table>
    <Pagina :page-data="pageData" />
    <el-dialog v-model="infoVisible" title="种植规划" width="1000" center>
      <el-form ref="infoRef" :model="infoData" :rules="infoRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地块名:" prop="landName">
              <el-input v-model="infoData.landName" placeholder="请输入" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" prop="gridName">
              <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="种植产物" prop="gridName">
              <el-input v-model="infoData.gridName" placeholder="请输入种植产物" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植日期" prop="gridName">
              <el-date-picker
                v-model="infoData.date"
                type="date"
                placeholder="请选择种植日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                :size="size"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="种子供应商" prop="gridName">
              <el-input v-model="infoData.gridName" placeholder="请输入种子供应商" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度计划" prop="gridName">
              <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="infoCancel">取消</el-button>
          <el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <div>
      <el-text class="mx-1" size="large">种植阶段详情</el-text>
      <div style="margin-top: 16px">
        <el-form ref="stageRef" :model="stageInfo">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-button type="primary" @click="addSub">新增</el-button>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属阶段" prop="gridName">
                <el-select v-model="stageInfo.stage" placeholder="请选择所属阶段" style="width: 240px" :clearable="true">
                  <el-option v-for="item in stageOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="getStageList()">查询</el-button>
              <el-button type="" @click="handleResetStage">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="sublist">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index"> </el-table-column>
          <el-table-column label="所属阶段" prop="landName" width="240" show-overflow-tooltip />
          <el-table-column label="作业计划" prop="address" show-overflow-tooltip />
          <el-table-column label="作业时间" prop="owner" show-overflow-tooltip />
          <el-table-column label="结束时间" prop="owner" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
            <el-button type="primary" @click="doSubEdit()">编辑</el-button>
            <el-button type="danger" @click="doSubDel()">删除</el-button>
          </el-table-column>
        </el-table>
        <Pagina :page-data="subPageData" />
      </div>
    </div>
  </CustCard>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Pagina from '@/components/pagina.vue';
import CustCard from '@/components/CustCard.vue';
import { getLandsList, saveLands } from '@/apis/land.js';
import { useApp } from '@/hooks';
onMounted(() => {
  getList();
});

/* --------------- data --------------- */
// #region
const app = useApp();
const searchRef = ref();

const searchCondition = reactive({
  landName: '',
  owner: '',
  crop: '',
});

const pageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});

const infoVisible = ref(false);
const infoRef = ref();
const list = ref([]);
const btns = reactive([
  {
    label: '新增种植规划',
    method: function () {
      console.log('add');
      infoVisible.value = true;
      let parmer = {
        landId: '1892400039696359426,1892400422703423489',
        planId: '1890242496744136706',
        crop: '水稻',
        seedSupplier: '园艺',
        planDate: '2025-02-25',
      };
      saveLands({})
        .then((res) => {
          if (res.code === 200) {
            app.$message.success('添加成功！');
          }
        })
        .catch((err) => {
          app.$message.error(err.msg);
        })
        .finally(() => {});
    },
  },
  {
    label: '导入',
    disabled: false,
    method: function () {
      console.log('import');
    },
  },
  {
    label: '导出',
    disabled: true,
    method: function () {
      console.log('export');
    },
  },
]);

const infoData = reactive({
  landName: '',
  gridName: '',
  owner: '',
  date: '',
  plan: '',
});

const infoRules = reactive({
  landName: [{ required: true, message: '请输入地块名', trigger: 'blur' }],
});
const options = reactive([
  {
    value: '年度计划1',
    label: 'Option1',
  },
  {
    value: '年度计划2',
    label: 'Option2',
  },
]);

const subPageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});
const sublist = ref([]);
const stageInfo = reactive({
  stage: '',
});
const stageRef = ref();
const stageOptions = reactive([
  {
    value: '阶段1',
    label: 'Option1',
  },
  {
    value: '阶段2',
    label: 'Option2',
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region

async function getList() {
  const params = { current: pageData.page, size: pageData.size };
  let { code, data, msg } = await getLandsList(params);
  //console.log('res ---------', data);
  list.value = data.records || [];
  pageData.total = data.total;
}

function handleResetSearch() {
  searchRef.value && searchRef.value.resetFields();
  getLandsList();
}

function doEdit() {
  console.info('编辑');
  infoVisible.value = true;
}

function doDel() {
  console.info('删除');
  app
    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      // DeleteEntity({ ids: ids.join(',') })
      //   .then((res) => {
      //     if (res.code === 200) {
      //       app.$message.success('删除成功！');
      //       loadData();
      //     }
      //   })
      //   .catch((err) => {
      //     app.$message.error(err.msg);
      //   });
    })
    .catch(() => {});
}

const subMitInfo = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      infoHide();
      console.log('submit!');
    } else {
      console.log('error submit!');
    }
  });
};

const infoCancel = () => {
  infoHide();
};

const infoHide = () => {
  infoVisible.value = false;
};

const addSub = () => {
  console.log('新增阶段');
};

async function getStageList() {
  // const params = { current: pageData.page, size: pageData.size };
  // let res = await getLandsList(params);
  // console.log('res ---------', res);
}

function handleResetStage() {
  stageRef.value && stageRef.value.resetFields();
  stageInfo.stage = '';
  console.info('重置所属阶段筛选条件');
  getStageList();
}

const doSubEdit = () => {
  console.log('编辑sub');
};

const doSubDel = () => {
  console.log('删除sub');
};

// #endregion
</script>

<style lang="scss" scoped>
.container {
  border-radius: 4px;
  background-color: #ffffff;
}
</style>
