<template>
  <!-- 提交 -->
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <div style="margin-bottom: 1.5rem;">
      <van-grid :column-num="3" style="background-color: #fff;">
        <van-grid-item>
          <div>发起人员:</div>
          <div>{{ messageList.createUserName }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>项目负责人:</div>
          <div>{{ messageList.leaderUserName }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>任务状态:</div>
          <div>{{ messageList.status }}</div>
        </van-grid-item>
        <van-grid-item>
          <div>开始时间:</div>
          <div>
            {{
              timestampToTimes(messageList.startTime, "DT2") ||
                messageList.startTime
            }}
          </div>
        </van-grid-item>
        <van-grid-item>
          <div>结束时间:</div>
          <div>
            {{
              timestampToTimes(messageList.endTime, "DT2") ||
                messageList.endTime
            }}
          </div>
        </van-grid-item>
      </van-grid>
      <van-steps
        :active="status"
        active-icon="success"
        active-color="#38f"
        style="margin: 0.26rem 0;"
      >
        <van-step>任务发起</van-step>
        <van-step>风险评估</van-step>
        <van-step>评估审核</van-step>
        <van-step>项目完成</van-step>
      </van-steps>
      <van-tabs v-model="active" color="#2980f7" animated offset-top="2.93rem">
        <van-tab title="任务详情">
          <van-form
            :scroll-to-error="true"
            :show-error="false"
            validate-trigger="onSubmit"
          >
            <van-field
              readonly
              name="createUserName"
              :value="form.createUserName"
              label="创建人员"
              input-align="right"
              :rules="[{ required: true, message: '创建人员不能为空' }]"
            />
            <van-field
              readonly
              name="createDeptName"
              :value="form.createDeptName"
              label="创建单位"
              input-align="right"
              :rules="[{ required: true, message: '创建单位不能为空' }]"
            />
            <van-field
              readonly
              name="name"
              :value="form.name"
              label="任务名称"
              input-align="right"
              :rules="[{ required: true, message: '任务名称不能为空' }]"
            />

            <van-field
              readonly
              name="projectName"
              :value="form.projectName"
              label="关联项目"
              input-align="right"
              :rules="[{ required: true, message: '关联项目不能为空' }]"
            />

            <van-field
              readonly
              name="buildingNames"
              :value="form.buildingNames"
              label="评估楼栋"
              input-align="right"
              :rules="[{ required: true, message: '评估楼栋不能为空' }]"
            />

            <van-field
              readonly
              name="deptName"
              :value="form.deptName"
              label="评估小组选择"
              input-align="right"
              :rules="[{ required: true, message: '评估小组不能为空' }]"
            />

            <van-field
              readonly
              name="leaderUserName"
              :value="form.leaderUserName"
              label="评估小组组长"
              input-align="right"
              :rules="[{ required: true, message: '评估小组组长不能为空' }]"
            />

            <van-field
              readonly
              clickable
              name="workUserNames"
              :value="form.workUserNames"
              label="评估成员"
              input-align="right"
              :rules="[{ required: true, message: '评估成员不能为空' }]"
            />

            <van-field
              v-model="form.startTime"
              readonly
              name="location"
              label="任务开始时间"
              input-align="right"
              :formatter="
                () => {
                  return timestampToTimes(form.startTime, 'DT2');
                }
              "
              :rules="[{ required: true, message: '任务开始时间不能为空' }]"
            />

            <van-field
              v-model="form.endTime"
              readonly
              name="location"
              label="任务结束时间"
              :formatter="
                () => {
                  return timestampToTimes(form.endTime, 'DT2');
                }
              "
              input-align="right"
              :rules="[{ required: true, message: '任务结束时间不能为空' }]"
            />
          </van-form>
        </van-tab>
        <van-tab title="风险清单">
          <van-sticky>
            <van-dropdown-menu>
              <van-dropdown-item v-model="buildingFValue" :options="buildingFList"  get-container="body" @change="changeNextList('GroundList','buildingF')"/> <!-- 楼栋 -->
              <van-dropdown-item v-model="groundValue" :options="groundList"  get-container="body" @change="changeNextList('FloorList','ground')"/>  <!-- 地上地下 -->
              <van-dropdown-item v-model="floorValue" :options="floorList"  get-container="body"  @change="changeNextList('RoomList','floor')"/> <!-- 楼层 -->
              <van-dropdown-item v-model="roomValue" :options="roomList"  get-container="body"   @change="changeNextList('','room')"/> <!-- 房间 -->
            </van-dropdown-menu>
          </van-sticky>
          <div style="overflow-y: auto;padding: 10px;">
            <van-cell-group
              inset
              v-for="(item, index) in riskList"
              :key="index"
            >
              <van-row
                class="list-row"
                type="flex"
                align="center"
                style="margin-top:10px;"
                @click="toRiskDetail(item)"
              >
                <!-- <van-col span="20"> -->
                <van-col>
                  <van-image
                    style="vertical-align: middle;margin-right: 15px;margin-left: 10px;"
                    width="58"
                    height="58"
                    :src="
                      item.level == '重大风险'
                        ? require('@/assets/imgs/redInherent.png')
                        : item.level == '较大风险'
                        ? require('@/assets/imgs/inherentOrange.png')
                        : item.level === '一般风险'
                        ? require('@/assets/imgs/yellowInherent.png')
                        : require('@/assets/imgs/blueInherent.png')
                    "
                  />
                  <!-- <van-image width="46" height="46" :src="item.avatar" /> -->
                </van-col>
                <van-col span="17">
                  <van-row gutter="0">
                    <van-col
                      span="10"
                      style="font-weight: bold;color:#000;font-size: 16px;"
                      >风险名称：</van-col
                    >
                    <van-col span="14" style="color: #000;font-size: 16px;">{{
                      item.name
                    }}</van-col>
                  </van-row>
                  <van-row gutter="0">
                    <van-col
                      span="9"
                      style="font-weight: bold;color:#666666;font-size: 12px;"
                      >风险等级：</van-col
                    >
                    <van-col
                      span="15"
                      style="color: #9d9d9d;font-size: 12px;"
                      >{{ item.level }}</van-col
                    >
                  </van-row>
                  <van-row gutter="0">
                    <van-col
                      span="9"
                      style="font-weight: bold;color:#666666;font-size: 12px;"
                      >上报时间：</van-col
                    >
                    <van-col
                      span="15"
                      style="color: #9d9d9d;font-size: 12px;"
                      >{{ timestampToTimes(item.createTime, "DT2") }}</van-col
                    >
                  </van-row>
                  <van-row gutter="0">
                    <van-col
                      span="9"
                      style="font-weight: bold;color:#666666;font-size: 12px;"
                      >所属房间：</van-col
                    >
                    <van-col
                      span="15"
                      style="color: #9d9d9d;font-size: 12px;"
                      >{{
                        item.buildingName + item.floorName + item.roomName
                      }}</van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="4" class="list-right">
                  <van-tag plain type="primary"
                    >详情<van-icon name="arrow" size="12px"
                  /></van-tag>

                  <!-- <van-row type="flex">
                    详情
                    
                  </van-row> -->
                </van-col>
              </van-row>
            </van-cell-group>
          </div>
        </van-tab>
        <van-tab title="审核记录">
          <div class="journal-wrap">
            <van-cell-group inset>
              <van-steps
                direction="vertical"
                :active="99999"
                v-if="riskLogList.length > 0"
              >
                <van-step v-for="(item, index) in riskLogList" :key="index">
                  <div class="step-wrap">
                    <van-row>
                      <van-col span="24">
                        <div class="info-title">
                          {{ timestampToTimes(item.startTime, "DT1") }}
                        </div>
                      </van-col>
                    </van-row>
                    <van-row>
                      <van-col span="7"
                        ><span class="field-title">操作人：</span></van-col
                      >
                      <van-col span="17">{{ item.approvalUserName }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="7"
                        ><span class="field-title">任务节点：</span></van-col
                      >
                      <van-col span="17"
                        >{{ item.taskName
                        }}{{
                          item.taskResult
                            ? item.taskResult == 1
                              ? "（审批通过）"
                              : "（审批否决）"
                            : ""
                        }}</van-col
                      >
                    </van-row>
                    <van-row v-show="item.taskResult">
                      <van-col span="7"
                        ><span class="field-title">审批意见：</span></van-col
                      >
                      <van-col span="17">{{ item.taskOpinion }}</van-col>
                    </van-row>
                    <!-- <van-row>
                    <van-col span="7"
                      ><span class="field-title">结果：</span></van-col
                    >
                    <van-col span="17">{{LogType(item.taskResult)}}</van-col>
                  </van-row> -->
                  </div>
                </van-step>
              </van-steps>
              <div style="text-align: center;" v-if="riskLogList.length == 0">
                暂无数据
              </div>
            </van-cell-group>
          </div>
        </van-tab>
        <van-tab title="评估报告">
          <div
            style="height: 1.5rem;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           "
          >
            <div><van-icon name="column" size="26px" /></div>
            <div style="flex-grow:1;line-height: 0.6rem">
              <div>风险评估报告.PDF</div>
              <div>2019-3-21 10:23 100KB</div>
            </div>
            <div>
              <van-icon name="arrow" size="26px" />
            </div>
          </div>
          <div
            style="height: 1.5rem;
           background-color: #fff;
           border-bottom: 1px solid #97999a;
           display: flex;
           justify-content: space-between;
           line-height: 1.5rem;
           "
          >
            <div><van-icon name="column" size="26px" /></div>
            <div style="flex-grow:1;line-height: 0.6rem">
              <div>风险评估报告.PDF</div>
              <div>2019-3-21 10:23 100KB</div>
            </div>
            <div>
              <van-icon name="arrow" size="26px" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div
      v-show="pathAuth == 'riskAssess' && (status == 0 || status == 1)"
      style="display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #e3e3e3;
        height: 1.5rem;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;"
    >
      <div
        @click="performTasks"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="plus" /></div>
        <div>执行任务</div>
      </div>
      <!-- <div style="color: #ec808d;font-size: 14px;font-weight: 600;">
          <div style="font-size: 22px;"><van-icon name="success" /></div>
          <div>任务完成</div>
        </div> -->
    </div>
    <!-- <div
      v-show="pathAuth == 'riskManage' && status == 0"
      style="display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #e3e3e3;
        height: 1.5rem;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;"
    >
      <div
        @click="editTask"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;">
          <van-icon name="edit" />
        </div>
        <div>修改任务</div>
      </div>
      <div
        @click="delTask"
        style="color: #ec808d;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="cross" /></div>
        <div>删除任务</div>
      </div>
    </div> -->
    <div
      v-show="pathAuth == 'riskApprove0' && status == 2"
      style="display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #e3e3e3;
        height: 1.5rem;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;"
    >
      <div
        @click="approveTask(1)"
        style="color: #4bced0;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;">
          <van-icon name="success" />
        </div>
        <div>审批通过</div>
      </div>
      <div
        @click="unApproveTask"
        style="color: #ec808d;font-size: 14px;font-weight: 600;"
      >
        <div style="font-size: 22px;"><van-icon name="cross" /></div>
        <div>审批否决</div>
      </div>
    </div>
    <!-- 否决弹出层 -->
    <van-popup
      v-model="isShowAppvoreList"
      closeable
      round
      position="right"
      :style="{ width: '90%', height: '100%' }"
    >
      <van-cell-group title="审批否决">
        <!-- 内容列表 -->
        <div class="con-list">
          <van-checkbox-group v-model="checkValue">
            <van-cell-group
              inset
              v-for="(item, index) in buildingList"
              :key="index"
            >
              <van-row gutter="">
                <van-col span="2">
                  <van-checkbox :name="item.buildingId" />
                </van-col>
                <van-col span="14">{{ item.buildingName }}</van-col>
                <van-col
                  span="8"
                  :style="{
                    color:
                      item.status == 'wait'
                        ? '#F79648'
                        : item.status == 'finish'
                        ? '#03B615'
                        : '#FF041D'
                  }"
                  >{{
                    item.status == "wait"
                      ? "待评估"
                      : item.status == "finish"
                      ? "已完成"
                      : "已退回"
                  }}</van-col
                >
              </van-row>

              <van-row>
                <van-col span="18">
                  <van-row gutter="">
                    <van-col span="8">创 建 人：</van-col>
                    <van-col span="16">{{ item.createUserName }}</van-col>
                  </van-row>

                  <van-row gutter="">
                    <van-col span="8">处理人员：</van-col>
                    <van-col span="16">{{ item.workUserNames }}</van-col>
                  </van-row>

                  <van-row gutter="">
                    <van-col span="8">发起时间：</van-col>
                    <van-col span="16"
                      >{{ timestampToTimes(item.startTime, "DT2") }}
                    </van-col>
                  </van-row>
                </van-col>
                <van-col span="6">
                  <van-row>
                    <van-button
                      type="info"
                      size="mini"
                      @click="
                        {
                          checkValue = [item.buildingId];
                          approveTask(0);
                        }
                      "
                      >审批否决</van-button
                    >
                  </van-row></van-col
                >
              </van-row>
            </van-cell-group>
          </van-checkbox-group>

          <div
            style="display: flex;
        justify-content: space-around;
        background-color: #fff;
        border-top: 1px solid #e3e3e3;
        height: 1.5rem;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;"
          >
            <div
              @click="
                {
                  checkValue = [];
                  isShowAppvoreList = false;
                }
              "
              style="color: #FB6260;font-size: 14px;font-weight: 600;"
            >
              <div style="font-size: 22px;"><van-icon name="cross" /></div>
              <div>返回</div>
            </div>
            <div
              @click="approveTask(0)"
              style="color: #4bced0;font-size: 14px;font-weight: 600;"
            >
              <div style="font-size: 22px;"><van-icon name="success" /></div>
              <div>确认</div>
            </div>
          </div>
          <div
            style="
              width: 100%;
              text-align: center;
              font-size: 0.48rem;
              position: fixed;
              top: 30%;
            "
            v-if="buildingList['length'] == 0"
          >
            暂无数据
          </div>
        </div>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { timestampToTime, generateId } from "@/utils/format";
import { getFun, postFun } from "@/service/table.js";
export default {
  name: "risk-confirme",
  components: {
    LHeader
  },
  data() {
    return {
      text: "任务单",
      searchValue: "",
      messageText: "",
      checkValue: [],
      isAll: false,
      plan: 0,
      showIndex: false,
      isShowAppvoreList: false,
      isShowText: false,
      isHaveNews: false,
      messageList: [],
      riskLogList: [],
      buildingList: [],
      Loop: "", // 定时器
      active: 0,
      status: 0,
      pathAuth: "",
      form: {},
      tabs: [],
      riskList: [],
      floorValue: 0,
      groundValue:0,
      roomValue: 0,
      buildingFValue:0,
      buildingFList: [
        { text: "全部", value: 0 }
      ],
      groundList: [
        { text: "全部", value: 0,children:[]}
      ],
      floorList: [
        { text: "全部", value: 0 }
      ],
      roomList: [
        { text: "全部", value: 0 }
      ],
    };
  },
  created() {
    this.planId = this.$route.params.id || sessionStorage.getItem("planId");
    var buildingId =
      this.$route.params.buildingId || sessionStorage.getItem("buildingId");
    this.pathAuth = sessionStorage.getItem("pathAuth");
    this.postList(this.planId, buildingId);
    this.getRiskTaskList(this.planId, buildingId);
    this.getBuildingFList()
  },
  methods: {
    timestampToTimes(time, type) {
      return timestampToTime(new Date(time), type, true);
    },

    /* swp add 风险清单筛选 */
    changeData(arr) {
      if(Array.isArray(arr)){
         return arr.map(item=>({ text: item.name,value: item.id || item.name,...item}))
        }
    },
    getBuildingFList(){
        getFun(`/risk/plan/plan/building/list/${this.planId}`).then(res=>{
          const data = res.data;
          this.buildingFList = [{ text: "全部", value: 0 },...this.changeData(data)]
        })
    },
    getGroundList(){
        getFun(`/risk/plan/floor/list/${this.buildingFValue}`)
          .then(res => {
            const data = res.data;
            this.groundList = [{ text: "全部", value: 0,children:[] },...this.changeData(data)]
          })
          .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
          });
    },
    getFloorList() {
        const getfloors = this.groundList.find(x=>x.value===this.groundValue)
        if(getfloors){
          this.floorList = [{ text: "全部", value: 0 },...this.changeData(getfloors.children)]
        }
    },
    getRoomList() {
        getFun(`/risk/plan/room/list/${this.floorValue}`)
          .then(res => {
            const data = res.data;
            this.roomList = [{ text: "全部", value: 0 },...this.changeData(data)]
          }) .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
          });
    },
    /* 切换楼栋，楼层 */
    changeNextList(needChange,from){  
        this.getRiskTaskList(this.planId,this.buildingFValue||'',{
          floorId:this.floorValue||'',
          roomId:this.roomValue||'',
        })
        /* 清空后面子项 start*/
        const list = ['buildingF','ground','floor','room'];
        const i = list.indexOf(from);
        if(i>-1){
            list.slice(i+1).forEach(val=>{
              this[val+'Value'] = 0;
              this[val+'List'] = [{ text: "全部", value: 0}];
            })
        }
        /* 清空后面子项 end*/
        needChange&&this['get'+needChange]()
    },
    /* swp end 风险清单筛选 */


    //执行任务
    performTasks() {
      sessionStorage.setItem(
        "buildingId",
        this.messageList.detailsDto.buildingIds
      );
      sessionStorage.setItem("planId", this.messageList.id);
      sessionStorage.setItem(
        "buildingName",
        this.messageList.detailsDto.buildingNames
      );
      sessionStorage.setItem(
        "projectId",
        this.messageList.detailsDto.projectId
      );
      sessionStorage.setItem(
        "projectName",
        this.messageList.detailsDto.projectName
      );

      this.$router.push({
        name: "riskInherent",
        params: {
          id: this.messageList.id,
          buildingId: this.messageList.detailsDto.buildingIds,
          buildingName: this.messageList.detailsDto.buildingNames
        }
      });
    },
    //修改任务
    editTask() {
      //TODO 修改任务
      console.log("修改任务");
    },
    //删除任务
    delTask() {
      //TODO 删除任务
      console.log("删除任务");
    },
    //审批通过
    approveTask(result) {
      //TODO 审批通过
      this.$router.push({
        name: "riskAppvoreText",
        params: {
          planId: this.planId,
          buildingIds: this.checkValue,
          result: result
        }
      });
      console.log("审批通过");
    },
    //审批否决
    unApproveTask() {
      if (this.isAll) {
        this.approveTask(0);
      } else {
        this.lookdetail(this.planId);
      }

      //TODO 审批否决
      console.log("审批否决");
    },
    //否决楼栋列表
    lookdetail(id) {
      this.isShowAppvoreList = true;
      getFun("/risk/plan/allocation/building/list/" + id)
        .then(res => {
          this.buildingList = res.data;
          this.checkValue = this.buildingList.map(item => item.buildingId);
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },
    //风险清单列表
    getRiskTaskList(planId, buildingId,data) {
      if (buildingId) {
        getFun(`/risk/plan/inherent/list/${planId}/${buildingId}`,data).then(res => {
          this.riskList = res.data;
        });
      } else {
        getFun(`/risk/plan/inherent/list/${planId}`).then(res => {
          this.riskList = res.data;
        });
      }
    },
    postList(id, buildingId) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      var url = `/risk/plan/details/${id}`;
      if (buildingId) url += "?buildingId=" + buildingId;
      getFun(url)
        .then(res => {
          this.$toast.clear();
          this.messageList = res.data || res.rows;
          this.form = this.messageList.detailsDto;
          this.checkValue = this.messageList.riskBuildingListDtos.map(
            item => item.buildingId
          );
          this.riskLogList = this.messageList.approveListDtos;
          switch (this.messageList.statusKey) {
            case "CREATE_TASK":
            case "WAIT_START":
              this.status = 0;
              break;
            case "RUNNING":
            case "WAIT_RETURN":
              this.status = 1;
              break;
            case "WAIT_LEADER_APPROVE":
            case "WAIT_LEADER_RETURN":
              this.status = 2;
              this.isAll = false;
              break;

            case "WAIT_APPROVE":
              this.status = 2;
              this.isAll = true;
              break;
            case "REVOKE":
            case "FINISH":
            case "PROJECT_REPORT":
              this.status = 3;
              break;
            default:
              this.status = 0;
              break;
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    onSearch(val) {
      this.postList(this.searchValue);
    },
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
    // 详情
    goDetail(data) {
      this.$router.push({
        name: "risk-big-detail",
        params: {
          id: data.businessId || data.id
        }
      });
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "risk-affirm",
        params: {
          data: data
        }
      });
      this.showIndex = null;
    },
    //固定资产
    goColorDetail() {
      // 楼层id：  floorId
      // 是否查看 ： isView： true/false  （true：查看，false:添加）
      this.$router.push({
        name: "riskView",
        params: {
          floorId: 18,
          isView: true
        }
      });
    },
    //风险清单列表点击
    toRiskDetail(item) {
      sessionStorage.setItem("inherentId", item.id);
      this.$router.push({
        name: "taskDetail",
        params: {
          inherentId: item.id,
          floorId: item.floorId
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: "";
  color: #2c3e50;
}

.cell-wrap {
  position: relative;
}
.van-cell-group--inset .van-row {
  line-height: 1.5 !important;
}

p {
  font-size: 0.4rem;
  font-weight: none;
  padding-left: 0.16rem;
  margin: 0.186667rem 0;
  color: #7f7f7f;
}

.van-cell-group--inset {
  margin: 0;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  position: relative;

  .van-row {
    margin-bottom: 0.133333rem;
    line-height: 0.64rem;
  }
}
.list-row {
  position: relative;
}
.list-right {
  position: absolute;
  right: 0;
}

.journal-wrap {
  position: relative;
}

.supervise-wrap {
  position: relative;
}

.info-title {
  color: #2980f7;
  font-weight: none;
}

.field-title {
  color: black;
  font-weight: none;
}

.more {
  position: absolute;
  bottom: 0.32rem;
  right: 15px;
  color: #2a80f7;
  font-weight: none;
  z-index: 99;
}
.item-prop {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
