<template>
  <view class="container" style="margin: 20rpx;margin-top: 220rpx;">
    <view class="zhixing_top" style="display: flex; flex-direction: column;">
      <view style="display: flex; flex-direction: row;margin-bottom: 10px; margin-left: 10px;">
        <view class="querybox" style=" margin-right:20px;">
          <view class="querybox_title" style="display: flex; flex-direction: row;">
            <view style="color: #ca4341; margin-right:5px;">*</view>
            <view>单位名称：</view>
          </view>
          <u-input style="width: 300px;" @change="chaxunqy()" v-model="queryParams.createBy" clearable
            placeholder="请输入单位名称"></u-input>
        </view>
        <view class="querybox">
          <view class="querybox_title">状态：</view>
          <csr-uni-data-select style="width:150px;" :filterable="false" v-model="queryParams.status" placeholder="选择状态"
            dataKey="label" dataValue="value" :localdata="zhuangtailist" @change="chaxunqy"
            :clear="true"></csr-uni-data-select>
        </view>
        <view class="querybox">
          <u-button style="width:100px; float: left;margin-left: 20px;" type="warning" icon="reload" text="重置"
            @click="resetqy()" size="small"></u-button>
          <u-button style="width:100px; float: left;margin-left:30px;" type="primary" icon="search" text="查询"
            @click="chaxunqy()" size="small"></u-button>
        </view>
      </view>
      <view style="margin-top: 20px; margin-bottom: 10px;">
        <u-button style="width:100px; float: left; margin-left:10px;" type="success" icon="plus-circle" text="添加"
          @click="addyz()" size="small" v-if="$checkPermi(['safety_hazard:company:add'])"></u-button>
        <u-button style="width:100px; float: left;margin-left: 20px;" type="primary" icon="edit-pen" text="编辑"
          :disabled="!rowitem" @click="upxiangmu()" size="small"
          v-if="$checkPermi(['safety_hazard:company:edit'])"></u-button>
        <u-button style="width:100px; float: left;margin-left: 20px;" type="error" icon="trash" text="删除"
          :disabled="!rowitem" @click="shanchujiancha()" size="small"
          v-if="$checkPermi(['safety_hazard:company:remove'])"></u-button>

      </view>
    </view>

    <!-- <view class="d-table">
      <view class="d-tr" style=" background: #e8eaec; line-height:34px; ">
        <view class="d-th">单位名称</view>
        <view class="d-th">级别</view>
        <view class="d-th">编码</view>
        <view class="d-th">状态</view>
        <view class="d-th">创建人</view>
        <view class="d-th">创建时间</view>
      </view>

      <view style="width: 100%;">
        <block v-for="(item, i) in tableData" :key="item.id">
          <view class="d-tr" v-if="item.level === 0 || checkOpen(item.pids[item.pids.length - 1])">
            <view class="d-td text-left" :class="`padding-left-${item.pids.length * 5 + 10}`"
              style="display: flex;flex-direction: row;align-items: center;"
              :style="{paddingLeft:item.level === 0?'8px':item.level === 1?'22px':'34px'}">
              <u-checkbox v-model:checked="item.checked" @change="dianjifxk($event,item, i)"></u-checkbox>
              <u-icon v-if="item.hasChildren" :name="!checkOpen(item.id) ? 'play-right-fill' : 'arrow-down-fill'"
                color="#666" size="12" @click="open(item, i)"></u-icon>
              <view v-if="item.level && !item.hasChildren" style="width: 24rpx;height: 26rpx;display: inline-block;">
              </view>
              <text class="padding-left-5">{{ item.name }}</text>
            </view>
            <view class="d-td">
              {{ item.level=='1'?'一级单位': item.level=='2'?'二级单位':'三级单位' }}
            </view>
            <view class="d-td">{{ item.code }}</view>
            <view class="d-td" style="text-align: center;">
              <u-tag style="width:40px; text-align: center; margin: 0 auto;" v-if="item.status"
                :text="item.status=='0'?'正常':'停用'" :type="item.status=='1'?'error':'success'" size="mini"></u-tag>
            </view>
            <view class="d-td">{{ item.createBy }}</view>
            <view class="d-td">{{ item.createTime }}</view>
          </view>
        </block>
      </view>
    </view> -->
    <view class="table-wrapper" style=" width: 98%; margin: 0 auto;">
      <view class="table-container">
        <!-- 表格容器 -->
        <view class="table-content">
          <!-- 表头部分 -->
          <view class="table-header" sty>
            <view class="table-row header-row">
              <view v-for="(col, index) in columns" :key="'header-' + index" class="table-header-cell" :style="{
                width: col.width + 'px',
                minWidth: col.minWidth + 'px'
              }">
                {{ col.title }}
              </view>
            </view>
          </view>

          <!-- 表格主体 -->
          <scroll-view class="table-body" scroll-y scroll-x :scroll-with-animation="true"
            :style="{ height: bodyHeight + 'px' }">
            <block v-for="(item, rowIndex) in tableData" :key="'body-' + rowIndex">
              <view class="table-row" v-if="item.level === 0 || checkOpen(item.pids[item.pids.length - 1])">
                <!--  <view v-for="(col, colIndex) in columns" :key="'body-' + rowIndex + '-' + colIndex"
                class="table-body-cell" :style="{
                width: col.width + 'px',
                minWidth: col.minWidth + 'px'
              }">
                {{ row[col.field] }}
              </view> -->
                <view class="table-body-cell" :style="{
                width: columns[0].width + 'px',
                minWidth: columns[0].minWidth + 'px',paddingLeft:item.level === 0?'8px':item.level === 1?'22px':'34px'
              }" style="justify-content:flex-start;">
                  <u-checkbox v-model:checked="item.checked" @change="dianjifxk($event,item, i)"></u-checkbox>
                  <u-icon v-if="item.hasChildren" :name="!checkOpen(item.id) ? 'play-right-fill' : 'arrow-down-fill'"
                    color="#666" size="12"></u-icon>
                  <view v-if="item.level && !item.hasChildren"
                    style="width: 24rpx;height: 26rpx;display: inline-block;">
                  </view>
                  <text class="padding-left-5" @click="open(item, i)">{{ item.name }}</text>
                </view>
                <view class="table-body-cell" :style="{
                width: columns[1].width + 'px',
                minWidth: columns[1].minWidth + 'px'
              }">
                  {{ item.level=='1'?'一级单位': item.level=='2'?'二级单位':'三级单位' }}
                </view>
                <view class="table-body-cell" :style="{
                width: columns[2].width + 'px',
                minWidth: columns[2].minWidth + 'px'
              }">
                  {{ item.code }}
                </view>
                <view class="table-body-cell" :style="{
                width: columns[3].width + 'px',
                minWidth: columns[3].minWidth + 'px'
              }">
                  <u-tag style="width:40px; text-align: center; margin: 0 auto;" v-if="item.status"
                    :text="item.status=='0'?'正常':'停用'" :type="item.status=='1'?'error':'success'" size="mini"></u-tag>
                </view>
                <view class="table-body-cell" :style="{
                width: columns[4].width + 'px',
                minWidth: columns[4].minWidth + 'px'
              }">
                  {{ item.createBy }}
                </view>
                <view class="table-body-cell" :style="{
                width: columns[5].width + 'px',
                minWidth: columns[5].minWidth + 'px'
              }">
                  {{ item.createTime }}
                </view>
              </view>
            </block>
          </scroll-view>

        </view>
      </view>
    </view>
    <u-modal content="" :closeOnClickOverlay="true" :title="modaltitle" :showCancelButton="true" confirmText="保存"
      width="600px" :show="addshow" @confirm="baocun()" @cancel="() => addshow = false">
      <view class="slot-content" style="width: 100%;">
        <view class="wenjuanadbox" style="width: 100%; height:200px; align-items: left; border-top:1px solid #eee;">
          <view class="querybox1" style=" margin-top: 10px;">
            <view class="querybox_title" style="display: flex; flex-direction: row;">
              <view style="color: #ca4341; margin-right:5px;">*</view>
              <view>上级单位：</view>
            </view>
            <view style="width:300px;">
              <customthree-tree-select :disabled="isedit" :listData="treelistData" dataLabel="name"
                dataValue="customerCompanyId" v-model="formdata.selectedArr" @xuanzechange="xuanzechange" />
            </view>
          </view>
          <view class="querybox1" style=" margin-top: 10px;">
            <view class="querybox_title" style="display: flex; flex-direction: row;">
              <view style="color: #ca4341; margin-right:5px;">*</view>
              <view>单位名称：</view>
            </view>
            <view style="width: 300px;">
              <u-input v-model="formdata.name" clearable placeholder="请输入单位名称"></u-input>
            </view>
          </view>
          <view class="querybox1" style=" margin-top: 10px;">
            <view class="querybox_title" style="display: flex; flex-direction: row;">
              <view style="color: #ca4341; margin-right:5px;"></view>
              <view>编码：</view>
            </view>
            <view style="width: 300px;">
              <u-input v-model="formdata.code" clearable placeholder="请输入编码"></u-input>
            </view>
          </view>
          <view class="querybox1" style=" margin-top: 10px;">
            <view class="querybox_title" style="display: flex; flex-direction: row;">
              <view style="color: #ca4341; margin-right:5px;">*</view>
              <view>单位状态：</view>
            </view>
            <view style="width: 300px;">
              <u-radio-group v-model="formdata.status" placement="row" activeColor="#007aff">
                <u-radio name="0" label="正常" :customStyle="{margin: '8px 8px 8px 8px'}"></u-radio>
                <u-radio name="1" label="停用" :customStyle="{margin: '8px 8px 8px 8px'}"></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>

      </view>

    </u-modal>

    <next-modal :show="shanchushow" confirmText="知道了" :showCancel="false" @confirm="shanchushow=false" width="400px">
      <!--注意插槽的使用的优先级大于next-modal组件的props的值-->
      <view slot="title" style=" border-bottom:1px solid #e8e8e8">
        <view style="text-align: center;padding:20rpx;line-height:22px;"><text>删除结果</text></view>
      </view>
      <!-- <template #content><view style="text-align: center;"><text>hello你好，这是next-modal组件的内容！next-modal是一个轻量级的组件，没有其他依赖，请放心使用！</text></view></template> -->
      <!--自定义content内容-->
      <view slot="content"
        style="min-height: 100px; max-height: 200px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column;">
        <view style="line-height:26px;">
          共：{{shanchujg.total}}条，删除成功：{{shanchujg.sucTotal}}条，失败：{{shanchujg.failedTotal}}条</view>
        <view style="line-height:20px;">{{shanchujg.failedDetailString}}</view>
      </view>

    </next-modal>
    <UniMenu />


  </view>
</template>

<script>
  /**
   * @vdata list 原始数据列表
   * @vdata openList 被展开数据的id列表
   * @vdata treeList 重组后用于展示的树形结构列表
   * @vmethod treeToArray 将树形数据转换为一维数组，通过pids进行关联
   * @vmethod setLevel 给list每个下标及其chilren的每个下标添加level（level越大，表示越接近leaf，leaf代表最下层或者代表树形数据的叶子）
   * @vmethod checkOpen 检测是否为打开状态
   *
   * 可以通过设置openList的默认值来使得树形数据默认展开，但是必须包含需要展开的列的所有pid
   *
   */
  import {
    getsafety_hazardInfo,
    getexecutionprojectlist
  } from "@/apis/zhixing"
  import {
    getthstatus
  } from "@/apis/hetong"

  import {
    getstandardchecktablelist

  } from "@/apis/biaozhunku"
  import {
    setsafety_hazardcompanystatus,
    getsysCtcNo,
    getcustomerCompanyIdinfo,
    getcompanylist,
    getcompanytreeselect,
    addsafety_hazardcompany,
    upsafety_hazardcompany,
    delsafety_hazardcompany
  } from "@/apis/yezhudanwei"
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import {
    parseObjectToArray
  } from "@/utils/util"
  import UniMenu from '@/components/uni-menu/uni-menu.vue'
  import comboxMore from '@/components/wl-combox-more/combox-more.vue'
  import useUserStore from '@/store/user';
  import CustomPicker from '@/components/custom-search-picker/index.vue';
  import AddEditnr from '@/pages/zhixing/addwenjuan.vue';
  import LandScape from '@/components/signature/landscape.vue';
  export default {
    name: 'tree',
    computed: {
      // 计算总宽度
      totalWidth() {
        return this.columns.reduce((sum, col) => sum + col.width, 0)
      },
      treeList() {
        // let list = this.setLevel(this.deepClone(this.list));
        // this.openIndexList.forEach((o, i) => {
        // 	const children = this.openList[i].children;
        // 	children.forEach((o1, i1) => {
        // 		list.splice(o + i1 + 1, 0, o1);
        // 	});
        // });
        let list = this.deepClone(this.tableData);
        list = this.treeToArray(list);
        return list;
      }
    },

    components: {
      UniMenu,
      comboxMore,
      CustomPicker,
      AddEditnr,
      LandScape
    },
    data() {
      return {

        // 表格配置
        columns: [{
            title: '单位名称',
            field: 'name',
            width: 400,
            minWidth: 80
          },
          {
            title: '级别',
            field: 'level',
            width: 100,
            minWidth: 120
          },
          {
            title: '编码',
            field: 'code',
            width: 200,
            minWidth: 180
          },
          {
            title: '状态',
            field: 'status',
            width: 80,
            minWidth: 80
          },
          {
            title: '创建人',
            field: 'createBy',
            width: 120,
            minWidth: 100
          },
          {
            title: '创建时间',
            field: 'createTime',
            width: 150,
            minWidth: 100
          }
        ],

        // 容器尺寸
        containerHeight: 400,
        bodyHeight: 460,
        rowitem: null,
        addshow: false,
        modaltitle: '添加',
        isedit: false,
        zhuangtailist: [{
          label: '正常',
          value: '0'
        }, {
          label: '停用',
          value: '1'
        }],

        queryParams: {
          nameLike: '',
          status: '',
        },
        checkedlist: [],
        tableData: [],
        formdata: {
          id: null,
          customerCompanyId: null,
          selectedArr: [],
          name: "",
          code: "",
          level: null,
          parentId: null,
          status: "0",
          remark: ""
        },
        shanchushow: false,
        shanchujg: {},
        list: [{
            name: '张三',
            age: 16,
            sex: 0,
            id: 1,
            children: [{
              name: '张三-1',
              age: 18,
              sex: 1,
              id: 11,
              children: [{
                  name: '张三-1-1',
                  age: 12,
                  sex: 1,
                  id: 111,
                  children: [{
                      name: '张三-1-1-1',
                      age: 12,
                      sex: 1,
                      id: 11111
                    },
                    {
                      name: '张三-1-1-2',
                      age: 11,
                      sex: 1,
                      id: 11112
                    }
                  ],
                  hasChildren: true
                },
                {
                  name: '张三-1-2',
                  age: 11,
                  sex: 1,
                  id: 112
                }
              ],
              hasChildren: true
            }],
            hasChildren: true
          },
          {
            name: '李四',
            age: 18,
            sex: 1,
            id: 2,
            children: [{
                name: '李四-1',
                age: 18,
                sex: 1,
                id: 21
              },
              {
                name: '李四-2',
                age: 18,
                sex: 1,
                id: 22
              }
            ],
            hasChildren: true
          },
          {
            name: '王五',
            age: 17,
            sex: 0,
            id: 3
          }
        ],
        openList: [], // 设置[1, 11, 111],即可预览默认展开
        treelistData: [],
      };
    },
    computed: {
      nick() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.name
      },
      imageSrc() {

        const userStore = useUserStore();
        return userStore.avatar
      },

      username() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.username
      },
      avatar() {
        //debugger
        const userStore = useUserStore();
        return userStore.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    methods: {
      parseObjectToArray,
      treeToArray(nodes, ids = [0]) {
        let arr = [];
        if (this.isArray(nodes)) {
          for (let i = 0, l = nodes.length; i < l; i++) {
            const node = nodes[i];
            node.pids = ids;
            node.level = ids.length - 1;
            arr.push(node); // 取每项数据放入一个新数组
            if (this.isArray(node['children']) && node['children'].length > 0)
              // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
              arr = arr.concat(this.treeToArray(node['children'], node.pids.concat([node.id])));
            delete node['children'];
          }
        }
        return arr;
      },
      syncOpen(ids) {
        const list = [];
        ids.forEach(o => {
          this.openList.forEach(o1 => {
            o1 === o && list.push(o1);
          });
        });
        this.openList = list;
      },
      checkOpen(id) {
        return ~this.openList.findIndex(o => o === id);
      },
      open(item, index) {
        if (!this.checkOpen(item.id)) {
          this.openList.push(item.id);
        } else {
          this.syncOpen(item.pids);
        }
      },
      setLevel(list = [], index = -1) {
        index++;
        list.forEach(o => {
          o.level = index;
          if (this.isArray(o.children)) {
            this.setLevel(o.children, index);
          }
        });
        return list;
      },
      // 深度克隆
      deepClone(obj) {
        // 对常见的“非”值，直接返回原来值
        if ([null, undefined, NaN, false].includes(obj)) return obj;
        if (typeof obj !== 'object' && typeof obj !== 'function') {
          //原始类型直接返回
          return obj;
        }
        var o = this.isArray(obj) ? [] : {};
        for (let i in obj) {
          if (obj.hasOwnProperty(i)) {
            o[i] = typeof obj[i] === 'object' ? this.deepClone(obj[i]) : obj[i];
          }
        }
        return o;
      },
      // 判断arr是否为一个数组，返回一个bool值
      isArray(arr) {
        return Object.prototype.toString.call(arr) === '[object Array]';
      },

      setHasChildren(arr) {
        if (!Array.isArray(arr)) return [];

        return arr.map(item => {
          const hasChildren = item.children &&
            Array.isArray(item.children) &&
            item.children.length > 0;

          const newItem = {
            ...item,
            hasChildren: hasChildren,
            checked: false
          };

          if (hasChildren) {
            newItem.children = this.setHasChildren(item.children);
          }

          return newItem;
        });
      },

      chaxunqy() {
        //查询
        this.getlistinfo()

      },
      resetqy() {
        //重置
        this.queryParams = {
          nameLike: '',
          status: '',
        };
        this.getlistinfo(); //获取列表
      },
      hideKeyboard() {
        uni.hideKeyboard()
      },
      getlistinfo() {
        //获取发现问题列表
        this.tableData = [];
        this.rowitem = null;
        getcompanytreeselect(this.queryParams).then((res) => {
          //debugger
          // this.tableData = res.rows || [];
          // this.treeList();
          let datalist = res.data || [];
          this.treelistData = JSON.parse(JSON.stringify(datalist));
          datalist = this.setHasChildren(datalist);
          let list = this.deepClone(datalist);
          list = this.treeToArray(list);
          // debugger
          this.tableData = list;

        })
      },

      dianjifxk(e, item, i) {
        // debugger
        for (let xx of this.tableData) {
          xx.checked = false;
        }
        if (e) {
          this.rowitem = item;
        } else {
          this.rowitem = null;
        }
      },
      addyz() {
        //添加
        this.addshow = true;
        this.isedit = false;
        this.formdata = {
          id: null,
          customerCompanyId: null,
          selectedArr: [],
          name: "",
          code: "",
          level: null,
          parentId: null,
          status: "0",
          remark: ""
        };


        //新增
        if (this.rowitem) {
          this.formdata.level = Number(this.rowitem.level) + Number(1);
          this.formdata.parentId = this.rowitem.customerCompanyId;
          this.formdata.customerCompanyId = this.rowitem.customerCompanyId;
        }

        this.modaltitle = "添加业主单位";
      },
      baocun() {
        //保存
        // debugger
        if (this.formdata.selectedArr.length == 0) {
          this.$modal.msgError("请选择上级单位！")
          return;
        } else if (!this.formdata.name) {
          this.$modal.msgError("请输入单位名称！")
          return;
        }


        //  debugger
        if (this.formdata.customerCompanyId) {
          //编辑
          upsafety_hazardcompany(this.formdata).then(res => {
            //debugger
            this.$modal.msgSuccess("修改成功！");
            this.addshow = false;

            setTimeout(() => {
              this.getlistinfo(); //获取列表
            }, 300);

          });
        } else {
          // debugger
          this.formdata.customerCompanyId = this.formdata.selectedArr[0].toString();
          addsafety_hazardcompany(this.formdata).then(res => {
            // debugger
            this.$modal.msgSuccess("添加成功！");
            this.addshow = false;
            setTimeout(() => {
              this.getlistinfo();
            }, 300);

          });
        }

      },
      shanchujiancha() {
        //删除
        // debugger

        this.$modal.confirm('确定要删除此条信息吗？').then(() => {
          // debugger
          delsafety_hazardcompany([this.rowitem.customerCompanyId]).then((res) => {
            // debugger
            // this.$modal.msgSuccess("删除成功！");
            this.shanchushow = true;
            this.shanchujg = res.data;
            setTimeout(() => {
              this.getlistinfo(); //获取列表
            }, 300);
          })
        });
      },
      xuanzechange(e) {
        //debugger
        // if (this.rowitem) {
        //   this.formdata.level = e.level;
        //   this.formdata.parentId = e.parentId;
        //   this.formdata.status = e.status;
        // } else {
        //   debugger
        //   this.formdata.level = Number(e.level) + Number(1);
        //   this.formdata.parentId = e.customerCompanyId;

        // }
        if (this.isedit) {

        } else {
          this.formdata.level = Number(e.level) + Number(1);
          this.formdata.parentId = e.customerCompanyId;

        }



      },
      upxiangmu() {
        //详情
        this.isedit = true;
        getcustomerCompanyIdinfo(this.rowitem.customerCompanyId).then(res => {
          // debugger
          this.formdata = res.data;
          this.formdata.selectedArr = [String(this.formdata.customerCompanyId)];
          this.addshow = true;
        });

      }
    },
    onShow() {

      this.getlistinfo();

      //  this.getxmdwlist(); //获取项目单位列表
      const userStore = useUserStore();
      userStore.setparentmenutitle('项目');
      userStore.setchildrenmenutitle('业主单位');
    },
    onLoad() {
      // this.getUser()
    },
  };
</script>

<style lang="scss">
  page {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  }

  @for $i from 0 through 100 {
    .w-#{$i} {
      width: $i + '%';
    }

    .h-#{$i} {
      height: $i + '%';
    }

    .padding-#{$i} {
      padding: $i + rpx;
    }

    .padding-left-#{$i} {
      padding-left: $i + rpx;
    }

    .padding-right-#{$i} {
      padding-right: $i + rpx;
    }

    .padding-top-#{$i} {
      padding-top: $i + rpx;
    }

    .padding-bottom-#{$i} {
      padding-bottom: $i + rpx;
    }

    .margin-#{$i} {
      margin: $i + rpx;
    }

    .margin-left-#{$i} {
      margin-left: $i + rpx;
    }

    .margin-right-#{$i} {
      margin-right: $i + rpx;
    }

    .margin-top-#{$i} {
      margin-top: $i + rpx;
    }

    .margin-bottom-#{$i} {
      margin-bottom: $i + rpx;
    }
  }

  .d-table {
    display: table;
    width: 98%;
    vertical-align: middle;
    text-align: center;
    table-layout: fixed;
    font-size: 28rpx;
    word-break: break-all;
    background-color: white;
    border-collapse: collapse;
    margin: 0 auto;

    &.primary {
      &.dark {
        .d-thead {
          background-color: #2b85e4;
        }
      }

      &.disabled {
        .d-thead {
          background-color: #a0cfff;
        }
      }

      &.light {
        .d-thead {
          background-color: #ecf5ff;
        }
      }

      .d-thead {
        background-color: #2979ff;
        color: #fff;
      }
    }

    &.success {
      &.dark {
        .d-thead {
          background-color: #18b566;
        }
      }

      &.disabled {
        .d-thead {
          background-color: #71d5a1;
        }
      }

      &.light {
        .d-thead {
          background-color: #dbf1e1;
        }
      }

      .d-thead {
        background-color: #19be6b;
        color: #fff;
      }
    }

    &.warning {
      &.dark {
        .d-thead {
          background-color: #f29100;
        }
      }

      &.disabled {
        .d-thead {
          background-color: #fcbd71;
        }
      }

      &.light {
        .d-thead {
          background-color: #fdf6ec;
        }
      }

      .d-thead {
        background-color: #ff9900;
        color: #fff;
      }
    }

    &.danger {
      &.dark {
        .d-thead {
          background-color: #dd6161;
        }
      }

      &.disabled {
        .d-thead {
          background-color: #fab6b6;
        }
      }

      &.light {
        .d-thead {
          background-color: #fef0f0;
        }
      }

      .d-thead {
        background-color: #fa3534;
        color: #fff;
      }
    }

    &.info {
      &.dark {
        .d-thead {
          background-color: #82848a;
        }
      }

      &.disabled {
        .d-thead {
          background-color: #c8c9cc;
        }
      }

      &.light {
        .d-thead {
          background-color: #f4f4f5;
        }
      }

      .d-thead {
        background-color: #909399;
        color: #fff;
      }
    }

    &.gray {
      .d-thead {
        background-color: #aaa;
        color: #fff;
      }
    }

    &.border-under {

      .d-td,
      .d-th {
        @extend .noBorder;
      }

      .d-tr {
        @extend .border-bottom;
      }

      .d-table {
        .d-tr {
          @extend .noBorder;
        }
      }
    }

    &.large {

      .d-td,
      .d-th {
        height: 80rpx;
      }
    }

    &.middle {

      .d-td,
      .d-th {
        height: 60rpx;
      }
    }

    .d-td,
    .d-th {
      @extend .border;
    }

    .d-table {
      height: 100%;

      .d-td,
      .d-th {
        @extend .noBorder;
      }

      // .d-tr {
      // 	&:first-child {
      // 		.d-td{
      // 			&.border-bottom {
      // 				border-bottom: none;
      // 			}
      // 			&.border-top {
      // 				border-top: none;
      // 			}
      // 		}
      // 	}
      // }
    }

    input.borderInput {
      border: 1px solid #ccc;
      border-radius: 6rpx;
      width: 80%;
      height: 80%;
      display: inline-flex;
    }
  }

  .d-caption {
    display: table-caption;
    background-color: inherit;
  }

  .d-thead {
    display: table-header-group;
    font-weight: 600;
  }

  .d-tbody {
    display: table-row-group;
  }

  .d-tfoot {
    display: table-footer-group;
  }

  .d-tr {
    display: table-row;
    width: 100%;
  }

  .d-td,
  .d-th {
    display: table-cell;
    vertical-align: middle;
    height: 60rpx;
    font-size: 28rpx;
    padding: 10rpx 10rpx;
    ;
  }

  .d-th {
    font-weight: 600;
  }

  .border-top {
    border-top: 1px solid #efefef !important;
  }

  .border-left {
    border-left: 1px solid #efefef !important;
  }

  .border-bottom {
    border-bottom: 1px solid #efefef !important;
  }

  .border-right {
    border-right: 1px solid #efefef !important;
  }

  .border {
    border: 1px solid #efefef;
  }

  .noBorder {
    border: 0;
  }

  .flex {
    display: flex;
    align-items: center;

    &-wrap {
      flex-wrap: wrap;
    }

    &-nowrap {
      flex-wrap: nowrap;
    }

    &-direction {
      flex-direction: column;
    }
  }

  @each $type in center,
  space-between,
  space-around,
  flex-start,
  flex-end {
    .row-#{$type} {
      justify-content: $type;
    }
  }

  @each $type in center,
  stretch,
  flex-start,
  flex-end {
    .col-#{$type} {
      align-items: $type;
    }
  }

  @each $type in center,
  left,
  right {
    .text-#{$type} {
      text-align: $type !important;
    }
  }

  .zhixing_top {
    width: 98%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 20px;


  }

  .querybox {
    display: flex;
    flex-direction: row;
    align-items: center;

    .querybox_title {
      font-size: 13px;
      // text-align: right;
      justify-content: end;
    }
  }

  .querybox1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 60rpx;
    font-size: 14px;

    .querybox_title {
      width: 100px;

      display: flex;
      flex-direction: row;

      justify-content: end;
    }

    .imgbox {
      width: calc(100% - 100px);
    }
  }
</style>



<style lang="scss" scoped>
  .table-wrapper {
    width: 100%;
    overflow: hidden;
    // border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .table-content {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e5e5;
  }

  .table-header {
    position: sticky;
    top: 0;
    background-color: #f8f8f8;
    z-index: 0;
    border-bottom: 2px solid #e5e5e5;
    /* 表头下边框 */
  }

  .table-body {
    overflow-y: auto;
    overflow-x: auto;
    /* 启用横向滚动 */
    scrollbar-width: none;
    border-top: 1px solid #e5e5e5;
    min-width: 100%;
    /* 确保容器宽度 */
    padding-bottom: 10px;
  }

  .table-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }

  .table-row:last-child {
    // border-bottom: none;
  }

  .table-header-cell,
  .table-body-cell {
    flex: 0 0 auto;
    padding: 12px 15px;
    box-sizing: border-box;
    border-right: 1px solid #e5e5e5;
    // background-color: #fff;
    font-size: 28rpx;
    white-space: normal;
    /* 允许换行 */
    word-break: break-word;
    /* 强制换行 */
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    min-height: 60rpx;
    /* 最小高度 */
  }

  /* 内容超出处理 */
  .table-body-cell {
    max-width: calc(100% - 30px);
    /* 保留滚动条空间 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出显示省略号 */
  }

  /* 长文本换行样式 */
  .table-body-cell.long-text {
    white-space: pre-wrap;
    text-overflow: clip;
    overflow: visible;
  }

  .table-header-cell:first-child,
  .table-body-cell:first-child {
    border-left: 2px solid #e5e5e5;
  }

  .table-header-cell:last-child,
  .table-body-cell:last-child {
    border-right: none;
  }

  /* 悬停效果 */
  .table-body-row:hover {
    background-color: #fafafa;
  }

  /* 滚动条样式 */
  .table-body::-webkit-scrollbar {
    width: 6px;
  }

  .table-body::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
  }

  .table-body::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
</style>