<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="待审核列表" name="first">
        <el-form :inline="true">
          <el-form-item prop="" label="课程名称: ">
            <el-input
              placeholder="请输入课程名称"
              v-model="searchData.keyword"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="主讲老师: ">
            <el-input
              placeholder="请输入主讲老师"
              v-model="searchData.teacher"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="年级：">
            <el-select
              v-model="searchData.grade"
              clearable
              size="large"
              placeholder="年级"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in gradeData"
                :key="item.grade_id"
                :label="item.grade_name"
                :value="item.grade_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="学科：">
            <el-select
              clearable
              v-model="searchData.subject"
              size="large"
              placeholder="学科"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in subjectData"
                :key="item.subject_id"
                :label="item.subject_name"
                :value="item.subject_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="时间">
            <el-date-picker
              v-model="searchData.time"
              value-format="YYYY-MM-DD HH:mm:ss"
              clearable
              type="datetime"
              @change="timeClear"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item prop="" label="学校：">
            <el-select
              v-model="searchData.school"
              clearable
              size="large"
              filterable
              placeholder="学校"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in schoolData"
                :key="item.id"
                :label="item.sm_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </el-form>
        <div class="flex justify-between items-center border-bottom">
          <div>
            <el-button @click="exportData" type="success">导出</el-button>
            <el-button @click="delData" type="danger" :disabled="multipleSelection==0">删除</el-button>
          </div>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          class="mt20"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="学校" prop="school_name" width="auto">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="课程名称" width="200">
            <template #default="scope">
              <div class="jy_name">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="年级"
            prop="grade_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="学科"
            prop="subject_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="课时数"
            prop="kss"
            width="110"
          ></el-table-column>
          <el-table-column
            label="主讲老师"
            prop="master_teacher"
            width="110"
          ></el-table-column>
          <el-table-column label="时间" prop="time" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button type="text" @click="auditData(scope.row)"
                >审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="limit"
            :currentPage="currentPage"
          ></el-pagination>
        </footer>
      </el-tab-pane>
      <el-tab-pane label="已通过" name="second">
        <el-form :inline="true">
          <el-form-item prop="" label="课程名称: ">
            <el-input
              placeholder="请输入课程名称"
              v-model="searchData.keyword"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="主讲老师: ">
            <el-input
              placeholder="请输入主讲老师"
              v-model="searchData.teacher"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="年级：">
            <el-select
              v-model="searchData.grade"
              size="large"
              clearable
              placeholder="年级"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in gradeData"
                :key="item.grade_id"
                :label="item.grade_name"
                :value="item.grade_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="学科：">
            <el-select
              v-model="searchData.subject"
              size="large"
              clearable
              placeholder="学科"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in subjectData"
                :key="item.subject_id"
                :label="item.subject_name"
                :value="item.subject_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="时间">
            <el-date-picker
              v-model="searchData.time"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetime"
              clearable
              @change="timeClear"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item prop="" label="学校：">
            <el-select
              v-model="searchData.school"
              size="large"
              clearable
              filterable
              placeholder="学校"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in schoolData"
                :key="item.id"
                :label="item.sm_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </el-form>
        <div class="flex justify-between items-center border-bottom">
          <el-button @click="exportData" type="success">导出</el-button>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          class="mt20"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="学校" prop="school_name" width="auto">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="课程名称" width="200">
            <template #default="scope">
              <div class="jy_name">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="年级"
            prop="grade_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="学科"
            prop="subject_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="课时数"
            prop="kss"
            width="110"
          ></el-table-column>
          <el-table-column
            label="主讲老师"
            prop="master_teacher"
            width="110"
          ></el-table-column>
          <el-table-column label="时间" prop="time" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-button type="success" link>已通过</el-button>
            </template>
          </el-table-column>
        </el-table>

        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total,prev, pager, next"
            :page-size="10"
            :total="total"
            v-model:current-page="currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </footer>
      </el-tab-pane>
      <el-tab-pane label="未通过" name="third">
        <el-form :inline="true">
          <el-form-item prop="" label="课程名称: ">
            <el-input
              placeholder="请输入课程名称"
              v-model="searchData.keyword"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="主讲老师: ">
            <el-input
              placeholder="请输入主讲老师"
              v-model="searchData.teacher"
              clearable
              @clear="getListData"
            ></el-input>
          </el-form-item>
          <el-form-item prop="" label="年级：">
            <el-select
              v-model="searchData.grade"
              size="large"
              clearable
              placeholder="年级"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in gradeData"
                :key="item.grade_id"
                :label="item.grade_name"
                :value="item.grade_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="学科：">
            <el-select
              v-model="searchData.subject"
              size="large"
              clearable
              placeholder="学科"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in subjectData"
                :key="item.subject_id"
                :label="item.subject_name"
                :value="item.subject_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="" label="时间">
            <el-date-picker
              v-model="searchData.time"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="timeClear"
              type="datetime"
              clearable
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item prop="" label="学校：">
            <el-select
              v-model="searchData.school"
              size="large"
              filterable
              clearable
              placeholder="学校"
              @clear="getListData"
            >
              <el-option label="全部" value="" />
              <el-option
                v-for="item in schoolData"
                :key="item.id"
                clearable
                :label="item.sm_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </el-form>
        <div class="flex justify-between items-center border-bottom">
          <el-button @click="exportData" type="success">导出</el-button>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          class="mt20"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="学校" prop="school_name" width="auto">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="课程名称" width="200"
            ><template #default="scope">
              <div class="jy_name">
                {{ scope.row.name }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            label="年级"
            prop="grade_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="学科"
            prop="subject_name"
            width="110"
          ></el-table-column>
          <el-table-column
            label="课时数"
            prop="kss"
            width="110"
          ></el-table-column>
          <el-table-column
            label="主讲老师"
            prop="master_teacher"
            width="110"
          ></el-table-column>
          <el-table-column label="时间" prop="time" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-button type="danger" link>未通过 </el-button>
            </template>
          </el-table-column>
        </el-table>

        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total,prev, pager, next"
            :page-size="limit"
            :total="total"
            v-model:current-page="currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </footer>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="审核"
      v-loading="popLoading"
      v-model="dialogFormVisible"
      width="770px"
      class="pr-30px"
    >
      <el-form
        :model="form"
        disabled
        label-width="140px"
        ref="formRef"
        :rules="rules"
        v-if="!popLoading"
      >
        <el-form-item label="课程封面图" prop="kz_img">
          <img class="w-140px" :src="form.kz_img" alt="" />
          <!-- <file-upload-progress v-model:part="form.kz_img" :limit="1" list-type="picture-card" accept=".jpg,.png,.jpeg"
            :size-limit="200">
            <template #default>
              <i-akar-icons:plus class="text-4xl" />
            </template>
            <template #tip>
              <div class="mt-2">支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320</div>
            </template>
          </file-upload-progress> -->
        </el-form-item>

        <el-form-item label="主讲账号" prop="kz_master_user_name">
          <el-input v-model="form.kz_master_user_name" />
        </el-form-item>
        <el-form-item label="主讲老师" prop="kz_master_teacher">
          <el-input v-model="form.kz_master_teacher" />
        </el-form-item>
        <el-form-item label="课程名称" prop="kz_title">
          <el-input v-model="form.kz_title" />
        </el-form-item>
        <el-form-item label="课程简介" prop="kz_kcjj">
          <el-input v-model="form.kz_kcjj" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item label="课时数" prop="kz_kss">
          <el-input v-model.number="form.kz_kss" />
        </el-form-item>
        <div class="flex justify-between w-600px">
          <el-form-item label="年级" prop="grade_id">
            <el-input v-model="form.grade_name" style="width: 200px;" />
            <!-- <remote-select v-model="form.grade_id" to="grade"></remote-select> -->
          </el-form-item>
          <el-form-item label="学科" prop="subject_id">
            <el-input v-model="form.subject_name" style="width: 200px;" />
            <!-- <remote-select
              v-model="form.subject_id"
              to="subject"
            ></remote-select> -->
          </el-form-item>
        </div>

        <!-- <el-form-item label="开始时间" prop="kz_starttime">
          <el-date-picker v-model="form.kz_starttime" type="datetime" />
        </el-form-item>
        <el-form-item label="结束时间" prop="kz_endtime">
          <el-date-picker v-model="form.kz_endtime" type="datetime" />
        </el-form-item> -->
        <el-form-item label="开始时间 - 结束时间" prop="kz_time">
          <el-date-picker
            v-model="form.kz_time"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="是否手机端推荐课程" prop="kz_recommend">
          <el-radio-group v-model="form.kz_recommend">
            <el-radio label="1">推荐</el-radio>
            <el-radio label="0">不推荐</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否精品" prop="kz_best">
          <el-radio-group v-model="form.kz_best">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="是否需要审核" prop="is_shenhe">
          <el-radio-group v-model="form.is_shenhe">
            <el-radio label="1">需要审核</el-radio>
            <el-radio label="0">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item label="审核状态" prop="shenhe_status">
          <el-select v-model="form.shenhe_status" class="w-full">
            <el-option label="不需要审核" value="0"></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核通过" value="2"></el-option>
            <el-option label="审核不通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核对象" prop="shenhe_user">
          <el-input v-model="form.shenhe_user" />
        </el-form-item>  -->

        <!-- <el-form-item label="课程安排" prop="kz_kcap">
          <file-upload-progress
            v-model:part="form.kz_kcap"
            :limit="1"
            accept=".doc,.docx,.xls,.xlsx"
          >
            <template #default>
              <div
                class="
                  flex_center
                  w-65px
                  h-65px
                  border border-dashed border-hex-E4E6E8
                  bg-hex-F9F9F9
                  text-hex-9D9AB9
                "
              >
                <i-ant-design:folder-open-outlined class="text-xl" />
              </div>
            </template>
          </file-upload-progress>
        </el-form-item> -->

        <div class="flex justify-center items-center text-sm mt-10">
          <div
            class="
              w-80px
              h-40px
              flex_center
              rounded
              bg-hex-F4F4F4
              text-hex-41387F
              cursor-pointer
              m-5
            "
            @click="handleBack"
          >
            取消
          </div>
          <div
            class="
              w-80px
              h-40px
              flex_center
              rounded
              bg-hex-00A3FF
              text-white
              cursor-pointer
              m-5
            "
            @click="handlePass"
          >
            通过
          </div>
          <div
            class="
              w-80px
              h-40px
              flex_center
              rounded
              bg-hex-F4F4F4
              text-hex-41387F
              cursor-pointer
              m-5
            "
            @click="handleUnPass"
          >
            不通过
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { download } from "~/utils/request";
import { Search } from "@element-plus/icons-vue";
import {
  grade_list,
  subject_list,
  school_list,
  teacher_list,
  wlzb_list,
  wlzb_detail,
  wlzb_edit,
  wlzb_del
} from "./api";
import { ElMessage } from "element-plus";
// import { user } from "@/store/user";
let shstatus = $ref("1");
const activeName = ref("first");
let form = $ref({
  kz_img: "",
  kz_master_teacher: "",
  kz_master_user_name: "",
  kz_title: "",
  kz_kcjj: "",
  kz_kss: "",
  grade_id: "",
  grade_name: "",
  subject_id: "",
  subject_name: "",
  kz_starttime: "",
  kz_endtime: "",
  kz_recommend: "",
  kz_best: "",
  is_shenhe: "",
  shenhe_user: "",
  shenhe_status: "",
  kz_time: undefined,
  kz_kcap: "",
});
const rules = {
  kz_img: [{ required: true, message: "请选择课程封面图", trigger: "submit" }],
  kz_master_teacher: [
    { required: true, message: "请输入主讲老师", trigger: "submit" },
  ],
  kz_master_user_name: [
    { required: true, message: "请输入主讲账号", trigger: "submit" },
  ],
  kz_title: [{ required: true, message: "请输入课程名称", trigger: "submit" }],
  kz_kcjj: [{ required: true, message: "请输入课程简介", trigger: "submit" }],
  kz_kss: [{ required: true, message: "请输入课时数", trigger: "submit" }],
};
let searchData = $ref({
  keyword: "",
  teacher: "",
  grade: "",
  subject: "",
  time: "",
  school: "",
});
// 年级
let gradeData = ref([]);
function getGrade() {
  grade_list().then((res) => {
    gradeData.value = res.data.page_data;
  });
}
// 学科
let subjectData = ref([]);
function getSubject() {
  subject_list().then((res) => {
    subjectData.value = res.data.page_data;
  });
}
// 学校
let schoolData = ref([]);
function getSchool() {
  school_list({}).then((res) => {
    schoolData.value = res.data.page_data;
  });
}
getGrade();
getSubject();
getSchool();
// 直播列表
const loading = ref(false);
let tableData = ref([]);
let unPassTable = ref([]);
let passTable = ref([]);

// 分页
let total = $ref(0);
const limit = $ref(10);
let currentPage = $ref("1");

let zbdata = {
  admin: 1,
  limit,
  page: currentPage,
  site: "tyyx",
  shenhe_status: "1",
};
// wlzb_edit({kz_id:'10191',kzkt_zbkc:{shenhe_status:"1"}}).then((res) => {
// });
function handleCurrentChange(val) {
  currentPage = val;
  zbdata.page = currentPage;
  getZbData();
}

// 初始化
function getZbData() {
  loading.value = true;
  wlzb_list(zbdata).then((res) => {
    if (res.code == 1) {
      res.data.page_data.forEach((item) => {
        item.time = item.starttime + "-" + item.endtime;
      });
      tableData.value = res.data.page_data;
      total = parseInt(res.data.total_rows);
      loading.value = false;
    }
  });
}
getZbData();
// 切换tab
const handleClick = (tab, event) => {
  if (event.target.id === "tab-first") {
    zbdata.shenhe_status = "1";
  } else if (event.target.id === "tab-second") {
    zbdata.shenhe_status = "2";
  } else {
    zbdata.shenhe_status = "3";
  }
  getZbData();
};
// 搜索
function searchList() {
  const { keyword, teacher, grade, subject, time, school } = searchData;
  Object.assign(zbdata, {
    keyword: keyword,
    kz_master_teacher: teacher,
    sm_id: school,
    kz_starttime: time,
    grade_id: grade,
    subject_id: subject,
  });
  getZbData();
}
function timeClear(time) {
  if (!time) {
    time = "";
    searchList();
  }
}
function getListData() {
  searchList();
}
// 清空搜索
function clearData() {
  searchData = {
    keyword: "",
    teacher: "",
    grade: "",
    subject: "",
    time: "",
    school: "",
  };
  searchList();
}
// 导出
let multipleSelection = $ref([]);
const handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach(item => {
    multipleSelection.push(item.id) ;
  })
}
function exportData() {
  const { keyword, teacher, grade, subject, time, school } = searchData;
  let data = {
    admin: "1",
    site: "tyyx",
    shenhe_status: zbdata.shenhe_status,
    keyword,
    kz_master_teacher: teacher,
    grade_id: grade,
    subject_id: subject,
    kz_ids: multipleSelection
  };
  download("kzkt/zbkc/index", data);
}
function delData(){
 let data = {
    kz_id: multipleSelection,
  };
  ElMessageBox.confirm("确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      wlzb_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getZbData()
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
}
// 审核
let popLoading = $ref(false);
let dialogFormVisible = $ref(false);
let kz_id = "";
function auditData(item) {
  kz_id = item.id;
  dialogFormVisible = true;
  popLoading = true;
  let data = {
    site: "tyyx",
    admin: 1,
    id: item.id,
  };
  wlzb_detail(data).then((res) => {
    if (res.code === "1") {
      Object.keys(form).forEach((key) => {
        form[key] = res.data.one_info[key];
      });
      form.kz_time = [res.data.one_info.starttime, res.data.one_info.endtime];
      popLoading = false;
    }
  });
}

function handleBack() {
  dialogFormVisible = false;
}
function handlePass() {
  let data = {
    admin: "1",
    site: "tyyx",
    issubmit: "1",
    kz_id,
    kzkt_zbkc: {
      shenhe_status: "2",
    },
  };
  wlzb_edit(data).then((res) => {
    if (res.code == "1") {
      ElMessage({
        message: "操作成功!",
        type: "success",
      });
      getZbData();
      handleBack();
    } 
  });
}
function handleUnPass() {
  let data = {
    admin: "1",
    site: "tyyx",
    issubmit: "1",
    kz_id,
    kzkt_zbkc: {
      shenhe_status: "3",
    },
  };
  wlzb_edit(data).then((res) => {
    if (res.code == '1') {
      ElMessage({
        message: "操作成功!",
        type: "success",
      });
      getZbData();
      handleBack();
    }
  });
}
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #00a3ff;
  font-size: 32px;
  font-weight: 600;
}

::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #000000;
}
::v-deep .el-input__wrapper {
  width: 160px;
}
.form-list {
  ::v-deep .el-form-item__label {
    margin-left: 45px;
  }
  ::v-deep .el-form-item {
    margin-right: 0;
  }
}
.jy_name {
  color: #00a3ff;
  width: 180px;
  padding-right: 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-dialog__body {
  .el-input,
  .el-textarea {
    width: 560px;
  }
  .el-select {
    width: 210px;
  }
}
</style>
