<template>
  <div class="workOrderConfig publicContainer">
    <el-row style="margin-bottom: 20px">
      <el-button type="primary" @click="addConfig">新增</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 20 }">
      <el-table-column prop="orderSourceName" label="工单来源" :resizable="false"></el-table-column>
      <el-table-column prop="enable" label="是否需受理" :resizable="false">
        <template #default="{ row }">
          <el-switch
            :active-value="'1'"
            :inactive-value="'0'"
            v-model="row.acceptNeed"
            inline-prompt
            active-text="受理"
            inactive-text="未受理"
            @change="toggleSwitch(row.id, row.acceptNeed, row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogConfig.visible"
      :title="dialogConfig.title"
      width="900px"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <el-form :inline="true" :model="addForm" :rules="rules" class="demo-form-inline" label-width="120px" ref="ruleAddFormRef">
        <el-row>
          <el-col :span="12"
            ><el-form-item label="工单来源" prop="orderSource">
              <el-select v-model="addForm.orderSource" class="m-2" placeholder="请选择工单来源" :style="{ width: '250px' }">
                <el-option v-for="item in orderSourceList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否需受理" prop="enable">
              <el-radio-group v-model="addForm.acceptNeed" class="w250">
                <el-radio label="1">受理</el-radio>
                <el-radio label="0">未受理</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="diaCheck">
          <el-button type="primary" @click="addSubmit(ruleAddFormRef)">确 定</el-button>
          <el-button class="cancel" @click="closeAdd">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="workOrderConfig">
import {
  listWorkOrderSourceConfig,
  editWorkOrderSourceConfig,
  listUnConfigDictData,
  addWorkOrderSourceConfig,
} from '@/api/order';
import { onMounted } from 'vue';

const { proxy } = getCurrentInstance();

const ruleAddFormRef = ref();

const data = reactive({
  addForm: {
    id: undefined,
    orderSource: '',
    acceptNeed: '1',
  },
  rules: {
    orderSource: [{ required: true, message: '请选择', trigger: 'change' }],
    acceptNeed: [{ required: true, message: '请选择', trigger: 'change' }],
  },
  orderSourceList: [],
});

const { addForm, rules, orderSourceList } = toRefs(data);

const tableData = ref([]);
const dialogConfig = reactive({
  visible: false,
  title: '新增工单配置',
});
const addConfig = () => {
  addForm.value = {
    id: undefined,
    orderSource: '',
    acceptNeed: '1',
  };
  // dialogConfig.visible = true;
  listUnConfigDictData().then(res => {
    console.log('🚀 ~ listUnConfigDictData ~ res:', res);
    orderSourceList.value = res.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue,
    }));
    dialogConfig.visible = true;
  });
};

const toggleSwitch = (id, enable, row) => {
  console.log('id', row);

  editWorkOrderSourceConfig({ ...row }).then(response => {
    proxy.$modal.msgSuccess('切换成功');
    getList();
  });
};

/* 新增弹窗提交 */
const addSubmit = async formRef => {
  if (!formRef) return;
  formRef.validate(valid => {
    if (valid) {
      addWorkOrderSourceConfig(addForm.value).then(response => {
        proxy.$modal.msgSuccess('新增成功');
        getList();
      });
      // if (addForm.value.id !== undefined) {
      //   editWorkOrderSourceConfig(addForm.value).then(response => {
      //     proxy.$modal.msgSuccess('编辑成功');
      //     getList({ page: queryParams.value.pageNum, limit: queryParams.value.pageSize });
      //   });
      // } else {
      //   addWorkOrderSourceConfig(addForm.value).then(response => {
      //     proxy.$modal.msgSuccess('新增成功');
      //     resetStation();
      //   });
      // }
      dialogConfig.visible = false;
    }
  });
};

/* 新增弹窗取消 */
const closeAdd = () => {
  dialogConfig.visible = false;
};

const getList = () => {
  listWorkOrderSourceConfig().then(res => {
    console.log('🚀 ~ listWorkOrderSourceConfig ~ res:', res);
    tableData.value = res.data;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.workOrderConfig {
  position: relative;
  width: 100%;
  height: 100%;
}

.diaCheck {
  border-top: 1px solid lightgray;
  padding: 10px 0;
  display: flex;
  justify-content: end;
}
</style>