<template>
  <div id="maintenanceRecord">
    <div id="searchBox">
      <n-space>
        <n-select
          v-model:value="selectedValue1"
          filterable
          placeholder="选择泵站"
          :options="options1"
          style="width: 250px"
        />
        <n-select
          v-model:value="selectedValue2"
          filterable
          placeholder="选择维修类型"
          :options="options2"
          style="width: 250px"
        />
        <n-radio-group v-model:value="selectedValue3" name="radiobuttongroup1">
          <n-radio-button
            v-for="song in songs"
            :key="song.value"
            :value="song.value"
          >
            {{ song.label }}
          </n-radio-button>
        </n-radio-group>
        <div class="btnTwo paiDan">
          派单次数：<span>{{ paiDan }}</span> 次
        </div>
        <div class="btnTwo xiangying">
          响应次数：<span>{{ xiangying }}</span
          >次
        </div>
        <div class="btnTwo neiBu">
          内部维修次数：<span>{{ neiBu }}</span
          >次
        </div>
        <div class="btnTwo waiBu">
          外部维修次数：<span>{{ waiBu }}</span
          >次
        </div>
      </n-space>
    </div>
    <div id="cententBox">
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :max-height="700"
        striped
        :columns="columns"
        :data="data"
        :pagination="paginations"
      ></n-data-table>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, h } from "vue";
import { NButton, NRate } from "naive-ui";
export default {
  name: "maintenanceRecord",
  setup() {
    const searchValue = reactive({
      selectedValue1: ref(null),
      selectedValue2: ref(null), //下拉选择
      selectedValue3: ref("0"), //时间选择
      options1: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "泵站1",
          value: "1",
        },
        {
          label: "泵站2",
          value: "2",
        },
      ], //下拉选择项
      options2: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "类型1",
          value: "1",
        },
        {
          label: "类型2",
          value: "2",
        },
      ], //下拉选择项
      songs: [
        {
          value: "0",
          label: "今天",
        },
        {
          value: "1",
          label: "近30天",
        },
        {
          value: "2",
          label: "近6个月",
        },
        {
          value: "3",
          label: "近一年",
        },
        {
          value: "4",
          label: "近三年",
        },
      ], //时间选择项
      paiDan: 20, //派单次数：
      xiangying: 20, //相应次数：
      neiBu: 12, //内部维修次数：
      waiBu: 8, //外部维修次数：

      //表格相关
      columns: [
        {
          title: "序号",
          key: "A",
          align: "center",
        },
        {
          title: "工单日期",
          key: "B",
          align: "center",
          width: "180px",
        },
        {
          title: "派单人",
          key: "C",
          align: "center",
        },
        {
          title: "工单编号",
          key: "D",
          align: "center",
        },
        {
          title: "维修类型",
          key: "E",
          align: "center",
        },
        {
          title: "问题分类",
          key: "F",
          align: "center",
        },
        {
          title: "维修级别",
          key: "G",
          align: "center",
        },
        {
          title: "维修问题及描述",
          key: "H",
          align: "center",
          width: "130px",
        },
        {
          title: "维修单位",
          key: "I",
          align: "center",
        },
        {
          title: "维护人",
          key: "J",
          align: "center",
        },
        {
          title: "评分",
          key: "K",
          align: "center",
          render(row) {
            return h(NRate, {
              "allow-half": true,
              "default-value": row.K,
              readonly: true,
            });
          },
        },
        {
          title: "操作",
          key: "actions",
          width: "400",
          align: "center",
          render(row) {
            const btn = searchValue.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(row, item.type),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "add",
          default: "添加经验库",
        },
      ],
    });
    async function getTableData() {
      const res = reactive(
      {"code":200,"message":"获取人员管理-生成设备维修记录结果成功","data":[{"A":21,"B":"1989-05-22 21:10:39","C":"余平","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"万明","K":4},{"A":22,"B":"2011-08-15 03:41:44","C":"高明","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"梁明","K":3},{"A":23,"B":"2010-05-08 14:32:50","C":"史刚","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"邱娜","K":3},{"A":24,"B":"1998-03-29 16:05:16","C":"冯芳","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"何芳","K":4},{"A":25,"B":"1979-12-24 02:28:36","C":"张芳","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"阎洋","K":4},{"A":26,"B":"1993-11-17 04:07:30","C":"黎娟","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"高涛","K":5},{"A":27,"B":"1998-11-12 15:08:59","C":"魏涛","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"高涛","K":4},{"A":28,"B":"1983-12-28 18:41:38","C":"谭静","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"毛军","K":2},{"A":29,"B":"2011-03-21 20:23:46","C":"龙勇","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"董勇","K":1},{"A":30,"B":"1973-08-30 07:08:45","C":"顾军","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"冯磊","K":1},{"A":31,"B":"2007-10-30 11:56:12","C":"郑强","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"廖秀兰","K":1},{"A":32,"B":"2021-12-21 04:47:11","C":"雷秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"刘洋","K":2},{"A":33,"B":"1995-09-30 14:40:38","C":"宋娜","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"许娜","K":3},{"A":34,"B":"1982-10-04 00:25:11","C":"龚秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"贺杰","K":1},{"A":35,"B":"1986-02-08 01:13:56","C":"钱刚","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"罗霞","K":2},{"A":36,"B":"2016-12-25 14:38:31","C":"韩秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"金艳","K":4},{"A":37,"B":"1993-07-29 13:41:37","C":"许娜","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"戴涛","K":2},{"A":38,"B":"2020-07-06 21:19:31","C":"白丽","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"袁丽","K":3},{"A":39,"B":"1999-08-31 22:39:46","C":"于敏","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"侯桂英","K":1},{"A":40,"B":"2002-08-25 05:32:55","C":"蒋静","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"史洋","K":4}]}
      )
      if (res.code == 200) {
        searchValue.data.push(...res.data);
      }
    }
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 30],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });

    // 点击事件
    const handleClick = (row, type) => {
      switch (type) {
        case "add":
          console.log("添加经验库");
          break;
      }
    };

    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(searchValue),
      getTableData,
      paginations: paginationReactive,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#maintenanceRecord {
  width: 100%;
  height: 100%;
}
#searchBox {
  width: 100%;
  height: 40px;

  .btnTwo {
    width: 140px;
    height: 32px;
    border-radius: 10px;
    margin-right: 10px;
    text-align: center;
    line-height: 32px;
    color: #fff;

    &.paiDan {
      background: linear-gradient(60deg, #6766ff 0%, #4aa8e8 100%);
    }
    &.xiangying {
      background: linear-gradient(60deg, #4db5c0 0%, #53cbd9 100%);
    }
    &.neiBu {
      background: linear-gradient(60deg, #e47778 0%, #f68687 100%);
    }
    &.waiBu {
      background: linear-gradient(60deg, #9248d8 0%, #b172ed 99%);
    }
  }
}
#cententBox {
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 20px;
}
</style>