<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      @row-click="rowClick"
      :data="data"
      :pageResult="pageResult"
      :selectable="true"
      :show-export="false"
      quick-search-props="name,procInstId,procDefName,subject"
      ref="htTable"
      v-if="
        defaultFiledShowConf.procInstId && defaultFiledShowConf.procInstId.desc
      "
      :header-cell-class-name="headerCellClassName"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button
            icon="el-icon-s-tools"
            @click="openSetDialog()"
            type="primary"
            >字段显示配置</el-button
          >
        </el-button-group>
      </template>
      <template v-slot:search>
        <ht-table-search-panel :divide="3" :label-width="90">
          <ht-table-search-field label="流程标题" prop="subject_" />
          <ht-table-search-field label="流程编号" prop="PROC_INST_ID_" />
          <ht-table-search-field label="流程名称" prop="proc_def_name_" />
          <ht-table-search-field label="任务名称" prop="NAME_" />
          <ht-table-search-field
            type="daterange"
            label="创建时间"
            prop="create_time_"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>

      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="procInstId"
          :label="defaultFiledShowConf.procInstId.desc"
          width="160"
          show-overflow-tooltip
          align="center"
        />
        <ht-table-column
          prop="subject"
          :label="defaultFiledShowConf.subject.desc"
          align="center"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            <el-link
              @click="handleCommand({row: row, command: 'completeTask'})"
              type="primary"
              >{{ row.subject }}</el-link
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="procDefName"
          :label="defaultFiledShowConf.procDefName.desc"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              v-if="row.canJumpInstance"
              @click="showprocDefNameDialog(row)"
              type="primary"
              title="流程设计编辑"
              >{{ row.procDefName }}</el-link
            >
            <div v-else>{{ row.procDefName }}</div>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="name"
          align="center"
          :label="defaultFiledShowConf.name.desc"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          prop="task.status_"
          :label="defaultFiledShowConf.status.desc"
          width="120"
          :render-header="renderHeaderMethod"
          :filters="statusArray"
        >
          <template v-slot="{row}">
            <el-tag
              v-show="row.status == s.value"
              :type="s.type"
              v-for="s in statusArray"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="createTime"
          :label="defaultFiledShowConf.createTime.desc"
          width="160"
          sortable
        />
        <ht-table-column
          prop="ownerName"
          :label="defaultFiledShowConf.ownerName.desc"
          width="120"
        />
        <ht-table-column
          prop="assigneeName"
          :label="defaultFiledShowConf.assigneeName.desc"
          width="120"
        >
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click">
              <el-table :data="scope.row.cList">
                <el-table-column
                  width="80"
                  property="typeName"
                  label="类型"
                ></el-table-column>
                <el-table-column width="320" property="names" label="名称">
                  <template slot-scope="scope1">
                    <span
                      class="owner-span"
                      v-for="s in scope1.row.list"
                      :key="s.type"
                    >
                      <el-tooltip
                        :disabled="scope1.row.type == 'user'"
                        class="item"
                        effect="light"
                        placement="top"
                        :content="s.users"
                      >
                        <el-button
                          :type="scope1.row.type != 'user' ? 'primary' : ''"
                          plain
                          size="mini"
                          >{{ s.type }}</el-button
                        >
                      </el-tooltip>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <i
                class="el-icon-more"
                slot="reference"
                v-if="scope.row.identityList"
                @click="candidateDetail(scope.row)"
              ></i>
            </el-popover>
            <span v-if="scope.row && scope.row.assigneeName">{{
              scope.row.assigneeName
            }}</span>
          </template>
        </ht-table-column>
        <ht-table-column
          v-if="defaultFiledShowConf.prop1"
          prop="prop1"
          :label="defaultFiledShowConf.prop1 && defaultFiledShowConf.prop1.desc"
          hidden
          width="120"
        />
        <ht-table-column
          v-if="defaultFiledShowConf.prop2"
          prop="prop2"
          :label="defaultFiledShowConf.prop2 && defaultFiledShowConf.prop2.desc"
          hidden
          width="120"
        />
        <ht-table-column
          v-if="defaultFiledShowConf.prop3"
          prop="prop3"
          :label="defaultFiledShowConf.prop3 && defaultFiledShowConf.prop3.desc"
          hidden
          width="120"
        />
        <ht-table-column
          v-if="defaultFiledShowConf.prop4"
          prop="prop4"
          :label="defaultFiledShowConf.prop4 && defaultFiledShowConf.prop4.desc"
          hidden
          width="120"
        />
        <ht-table-column
          v-if="defaultFiledShowConf.prop5"
          prop="prop5"
          :label="defaultFiledShowConf.prop5 && defaultFiledShowConf.prop5.desc"
          hidden
          width="120"
        />
        <ht-table-column
          v-if="defaultFiledShowConf.prop6"
          prop="prop6"
          :label="defaultFiledShowConf.prop6 && defaultFiledShowConf.prop6.desc"
          hidden
          width="120"
        />

        <ht-table-column width="200" label="操作" align="left">
          <template v-slot="{row}">
            <el-button
              v-if="row.status != 'TRANSFORMING'"
              type="text"
              @click="handleCommand({row: row, command: 'completeTask'})"
              >处理</el-button
            >
            <el-button
              v-if="row.status != 'TRANSFORMING'"
              type="text"
              @click="handleCommand({row: row, command: 'handleUrgent'})"
              >催办</el-button
            >

            <el-dropdown
              size="mini"
              trigger="click"
              class="more-operate-btn__dropdown"
              v-if="
                row.isBpmTask == '1' &&
                  row.status != 'TRANSFORMING' &&
                  row.status != 'APPROVELINEING' &&
                  row.status != 'SIGNSEQUENCEING' &&
                  row.status != 'SIGNLINEING' &&
                  row.status != 'TRANSFORMEDINQU'
              "
              @command="handleCommand"
              @visible-change="TaskCanJump(row)"
            >
              <!-- <span> <i class="el-icon-tickets"></i>处理 </span> -->
              <span class="more-operate-btn"
                >更多操作<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu
                slot="dropdown"
                class="operate-dropdown__button"
              >
                <!-- <el-dropdown-item
                  icon="el-icon-menu"
                  :command="{row: row, command: 'handleUrgent'}"
                  >催办</el-dropdown-item
                > -->
                <el-dropdown-item
                  v-if="row.status != 'TRANSFORMED'"
                  :command="{row: row, command: 'modifyExcutor'}"
                  >更改执行人</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="row.status != 'TRANSFORMED'&& isShowJump"
                  :command="{row: row, command: 'jump'}"
                >
                  跳转
                </el-dropdown-item>
                <el-dropdown-item :command="{row: row, command: 'showRecord'}">
                  干预记录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </ht-table-column>
      </template>
    </ht-table>

    <el-dialog
      title="更改任务执行人"
      :visible="dialogVisible"
      width="800px"
      appendToBody
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <form v-form>
        <el-form
          ref="form"
          :model="modifyparam"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="执行人：" required>
            <ht-user-selector-input
              :appendToBody="true"
              v-model="modifyparam.names"
              :config="{
                id: 'modifyparam.userIds',
                account: 'modifyparam.userAccounts'
              }"
            />
          </el-form-item>

          <el-form-item label="通知方式：" required>
            <MessageTypeSelector
              v-model="modifyparam.messageType"
              class="MessageTypeSelector"
            />
          </el-form-item>
          <el-form-item label="通知内容：" required>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入修改原因"
              v-model="modifyparam.cause"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- <table cellspacing="0" cellpadding="0" border="0" class="form-table">
          <tbody>
            <tr>
              <th style="width: 100px">
                <span class="xh-star">*</span>执行人：
              </th>
              <td>
                <ht-user-selector-input
                  :appendToBody="true"
                  v-model="modifyparam.names"
                  :config="{
                    id: 'modifyparam.userIds',
                    account: 'modifyparam.userAccounts'
                  }"
                />
              </td>
            </tr>
            <tr>
              <th style="width: 100px">
                <span class="xh-star">*</span>通知方式：
              </th>
              <td>
                <MessageTypeSelector v-model="modifyparam.messageType" />
              </td>
            </tr>
            <tr>
              <th style="width: 100px">
                <span class="xh-star">*</span>通知内容：
              </th>
              <td colspan="3">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入修改原因"
                  v-model="modifyparam.cause"
                ></el-input>
              </td>
            </tr>
          </tbody>
        </table> -->
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="字段显示配置"
      :visible.sync="filedConfDialogVisible"
      width="800px"
      appendToBody
      :close-on-click-modal="false"
      class="filed_conf"
      v-if="filedConfDialogVisible"
    >
      <form v-form data-vv-scope="conf-form">
        <table class="conf-table" cellspacing="0">
          <thead>
            <th style="width: 230px">字段名</th>
            <th style="width: 300px">标题名</th>
            <th style="width: 160px">是否在应用端显示</th>
          </thead>
          <tbody>
            <tr v-for="c in filedShowConfList" :key="c.name">
              <th>{{ c.name }}</th>
              <td>
                <ht-input
                  size="mini"
                  v-model="c.desc"
                  validate="required"
                  :maxlength="50"
                  :showWordLimit="true"
                  style="width:100%"
                />
              </td>
              <td>
                <el-switch
                  v-model="c.frontShow"
                  active-color="#409EFF"
                  inactive-color="#E9E9E9"
                  inactive-text="否"
                  active-text="是"
                ></el-switch>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="filedConfDialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveConf" size="small"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 流程催办 -->
    <InstanceUrgent ref="instanceUrgent" />
    <!-- 跳转 -->
    <!--  <task-selection ref="taskSelection"/>-->
    <!--  查阅记录  -->
    <ReferenceRecordManager
      :title="'干预记录'"
      :showType="'task'"
      :taskId="taskId"
      ref="referenceRecord"
      @onConfirm="afterSaveReferenceRecord"
    />
    <!-- 流程编辑 -->
    <DefManager
      v-show="showDefManager"
      ref="DefManager"
      @handleDefManagerClose="
        () => {
          showDefManager = false
        }
      "
    ></DefManager>
  </div>
</template>
<script>
import form from '@/api/form.js'
import flow from '@/api/flow.js'
import portal from '@/api/portal.js'
import req from '@/request.js'
import utils from '@/hotent-ui-util.js'
import {mapState, mapActions} from 'vuex'
import {Base64} from 'js-base64'
const MessageTypeSelector = () =>
  import('@/components/flow/MessageTypeSelector.vue')
const eipUserSelector = () =>
  import('@/components/selector/EipUserSelector.vue')
const InstanceUrgent = () => import('@/views/flow/InstanceUrgent.vue')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
const ReferenceRecordManager = () =>
  import('@/views/flow/ReferenceRecordManager.vue')
import deepClone from 'hotent-ui/src/util/clone'
import DefManager from './DefManager.vue'

export default {
  components: {
    MessageTypeSelector,
    eipUserSelector,
    InstanceUrgent,
    ReferenceRecordManager,
    DefManager
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      curSelectTaskId: '',
      procInstId: '',
      statusArray: [
        {text: '待办', value: 'NORMAL', type: 'success'},
        {text: '委托', value: 'AGENT', type: 'info'},
        {text: '征询', value: 'TRANSFORMEDINQU', type: 'info'},
        {text: '转办', value: 'DELIVERTO', type: 'success'},
        {text: '接收流转', value: 'TRANSFORMED'},
        // {text: '沟通', value: 'COMMU'},
        {text: '流转源', value: 'TRANSFORMING', type: 'warning'},
        {text: '被驳回', value: 'BACK', type: 'danger'},
        {text: '跟踪', value: 'FOLLOW', type: 'info'},
        // {text: '传阅', value: 'COPYTO', type: 'info'},
        {text: '用户加签', value: 'USERADDSIGN', type: 'info'},
        {text: '会签加签', value: 'ADDSIGN'},
        {text: '撤回', value: 'RECOVER', type: 'danger'}
      ],
      dialogVisible: false,
      showDefManager: false,
      filedConfDialogVisible: false,
      modifyparam: {type: 'sms'},
      defaultFiledShowConf: {},
      defaultFiledShowConfList: [
        {name: 'subject', desc: '流程标题', frontShow: true},
        {name: 'procInstId', desc: '流程编号', frontShow: true},
        {name: 'procDefName', desc: '流程名称', frontShow: true},
        {name: 'name', desc: '任务名称', frontShow: true},
        {name: 'status', desc: '类型', frontShow: true},
        {name: 'createTime', desc: '创建时间', frontShow: true},
        {name: 'creator', desc: '创建人', frontShow: true},
        {name: 'urgentStateValue', desc: '紧急状态', frontShow: false},
        {name: 'ownerName', desc: '所属人', frontShow: false},
        {name: 'assigneeName', desc: '待审批人', frontShow: false},
        {name: 'prop1', desc: '扩展1', frontShow: false},
        {name: 'prop2', desc: '扩展2', frontShow: false},
        {name: 'prop3', desc: '扩展3', frontShow: false},
        {name: 'prop4', desc: '扩展4', frontShow: false},
        {name: 'prop5', desc: '扩展5', frontShow: false},
        {name: 'prop6', desc: '扩展6', frontShow: false}
      ],
      filedShowConfList: [],
      editFiledConf: {
        name: '待办列表字段显示配置',
        alias: 'taskListFiledConf',
        encrypt: '1',
        description: '应用端待办列表字段显示配置',
        value: ''
      },
      typeNameConf: {
        org: '组织',
        job: '职务',
        position: '岗位',
        role: '角色',
        user: '用户'
      },
      taskId: '',
      currentRow: {},
      command: '',
      isShowJump: true
    }
  },
  computed: {
    ...mapState('login', ['currentUser']),
    frontUrl() {
      return type => {
        const BaseUrl = `${window.context.front}/matter/approvalForm?taskId=${
          this.curSelectTaskId
        }&instId=${this.procInstId}&isGetApprovalBtn=${true}`
        return type === 'free'
          ? `${BaseUrl}&type=free&isDefAuthorize=true&token=${this.currentUser.token}`
          : `${BaseUrl}&isDefAuthorize=true&token=${this.currentUser.token}`
      }
    }
  },
  methods: {
    showprocDefNameDialog(params) {
      flow.getMainByDefKey(params.procDefKey).then(res => {
        if (res.status == 200 && res.data) {
          this.showDefManager = true
          let dataList = {
            command: 'edit',
            row: res.data
          }
          this.$refs.DefManager.handleCommand(dataList)
        }
      })
    },
    TaskCanJump(row) {
      flow.taskCanJump(row.nodeId,row.procInstId).then(res => { 
        this.isShowJump = res.data.value
      })
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    //查看候选人详情
    candidateDetail(row) {
      let this_ = this
      this.$http
        .get(
          '${bpmRunTime}/runtime/task/v1/getCandidatesListByTaskId?taskId=' +
            row.id
        )
        .then(function(resp) {
          if (resp.data) {
            let temp = {}
            let tempList = []
            resp.data.forEach(c => {
              c.groupType = c.groupType ? c.groupType : c.type
              if (!temp[c.groupType]) {
                temp[c.groupType] = []
              }
              temp[c.groupType].push({type: c.name, users: c.userNames})
            })
            for (const type in temp) {
              tempList.push({
                type: type,
                typeName: this_.typeNameConf[type],
                list: temp[type]
              })
            }
            this_.$set(row, 'cList', tempList)
          }
        })
    },
    //流程催办
    handleUrgent(row) {
      this.$refs.instanceUrgent.handleOpen(
        row.procInstId,
        row.procDefId,
        row.subject,
        row.nodeId
      ) //父组件调用子组件方法
    },
    openSetDialog() {
      let this_ = this
      this.$http
        .get('${portal}/sys/sysProperties/v1/getJson?id=taskListFiledConf')
        .then(function(resp) {
          if (resp.data) {
            this_.editFiledConf = resp.data
            this_.filedShowConfList = JSON.parse(this_.editFiledConf.value)
          } else {
            this_.filedShowConfList = JSON.parse(
              JSON.stringify(this_.defaultFiledShowConfList)
            )
          }
          this_.filedConfDialogVisible = true
        })
    },
    saveConf() {
      let this_ = this
      utils
        .validateForm(this, 'conf-form')
        .then(r => {
          this.editFiledConf.value = JSON.stringify(this.filedShowConfList)
          this.$http
            .post('${portal}/sys/sysProperties/v1/save', this.editFiledConf)
            .then(function(resp) {
              if (resp.data && resp.data.state) {
                this_.editFiledConf = resp.data
                this_.formatConfListToObj()
                this_.$message({
                  type: 'success',
                  message: '保存成功',
                  onClose: function() {
                    window.location.reload()
                    this_.filedConfDialogVisible = false
                  }
                })
              }
            })
        })
        .catch(items => {
          this.$message.error(`还有内容未填写，无法保存。`)
        })
    },
    closeDialog() {
      this.dialogVisible = false
    },
    confirm() {
      let this_ = this
      let param = JSON.parse(JSON.stringify(this.modifyparam))
      if (!param.userIds) {
        this.$message.warning('执行人不能为空！')
        return
      }

      if (!param.messageType) {
        this.$message.warning('通知类型不能为空！')
        return
      }

      if (!param.cause) {
        this.$message.warning('通知内容不能为空！')
        return
      }
      param.userIds = param.userIds.split(',')
      //删除多余的入参
      if(param.hasOwnProperty('userAccounts')){
        delete param.userAccounts
      }
      if(param.hasOwnProperty('names')){
        delete param.names
      }
      req
        .post(
          window.context.bpmRunTime + '/runtime/task/v1/setTaskExecutors',
          param
        )
        .then(response => {
          let data = response.data
          if (data.state) {
            this_.$message.success(data.message)
            this_.$refs.htTable.load()
            this_.dialogVisible = false
          } else {
            this_.$message.fail(data.message)
          }
        })
    },
    completeTask(row) {
      this.curSelectTaskId = row.id
      this.procInstId = row.procInstId
      window.open(this.frontUrl('handle'), '_blank')
    },
    modifyExcutor(id) {
      this.modifyparam = {taskId: id}
      this.dialogVisible = true
    },
    loadData(param, cb) {
      if (this.$refs.htTable && this.$refs.htTable.quickSearchWord) {
        if (param.querys && param.querys.length > 0) {
          let temp = param.querys[0]
          for (let index = 1; index < 7; index++) {
            let query = JSON.parse(JSON.stringify(temp))
            query.property = 'prop' + index
            query.relation = 'OR'
            param.querys.push(query)
          }
        }
      }
      req
        .post(window.context.bpmRunTime + '/runtime/task/v1/list', param)
        .then(data => {
          let response = data.data
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    handleCommand(params) {
      switch (params.command) {
        case 'modifyExcutor':
          this.modifyExcutor(params.row.id)
          break
        case 'handleUrgent':
          this.handleUrgent(params.row)
          break
        case 'completeTask':
        case 'jump':
          this.beforeSaveReferenceRecord(params.row, params.command)
          break
        case 'showRecord':
          this.showRecords(params.row.id)
          break
      }
    },

    formatConfListToObj() {
      let editConfObj = {}
      let tempList = JSON.parse(JSON.stringify(this.filedShowConfList))
      tempList.forEach(c => {
        let key = c.name
        editConfObj[key] = c
      })

      this.$set(this, 'defaultFiledShowConf', editConfObj)
    },
    openJumpDialog(row) {
      this.curSelectTaskId = row.id
      this.procInstId = row.procInstId
      window.open(this.frontUrl('free'), '_blank')
    },
    /**
     * 打开详情页
     */
    beforeSaveReferenceRecord(row, command) {
      //记录当前行数据
      this.currentRow = deepClone(row)
      this.command = command
      //打开弹框用于填写查阅信息
      this.$refs.referenceRecord.showRecordDialog(this.currentRow, 'write')
    },
    /**
     * 打开详情页后跳转对应页
     */
    afterSaveReferenceRecord() {
      if (this.command === 'jump') {
        this.openJumpDialog(this.currentRow)
      } else if (this.command === 'completeTask') {
        this.completeTask(this.currentRow)
      }
    },
    /**
     * 展示查阅记录
     */
    showRecords(id) {
      this.taskId = id
      this.$refs.referenceRecord.showRecordDialog(this.currentRow, 'read')
    }
  },
  created() {
    let this_ = this
    this.$http
      .get(
        '${portal}/sys/sysProperties/v1/getDecryptByAlias?alias=taskListFiledConf'
      )
      .then(function(resp) {
        if (resp.data) {
          this_.filedShowConfList = JSON.parse(resp.data.value)
        } else {
          this_.filedShowConfList = JSON.parse(
            JSON.stringify(this_.defaultFiledShowConfList)
          )
        }
        this_.formatConfListToObj()
      })
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.aside-width {
  width: $--aside-width !important;
}

.conf-table > thead > tr > th,
.conf-table > thead > th,
.conf-table > tbody > tr > th,
.conf-table > tfoot > tr > th,
.table > thead > tr > td,
.conf-table > tbody > tr > td {
  border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 4px 8px;
  vertical-align: middle;
}
.conf-table {
  border-bottom: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
  width: 100%;
  max-height: 400px;
  overflow: auto;
  text-align: center;
  display: block;
  thead > th {
    background: #ebebeb;
  }
  tbody th,
  td {
    text-align: left;
    font-weight: 400;
  }
  ::v-deep {
    .el-switch {
      position: relative;
    }
    .el-switch__label {
      position: absolute;
      display: none;
    }
    .is-active {
      display: block;
    }
    .el-switch__label--right {
      color: #fff;
      left: -4px;
    }
    .el-switch__label--left {
      right: -4px;
      color: #999999;
      z-index: 2;
    }
  }
}
.filed_conf >>> .el-dialog__body {
  padding: 10px 20px;
}

.owner-span >>> .el-button {
  padding: 5px 10px;
}

::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}
.MessageTypeSelector {
  ::v-deep .el-checkbox-group {
    display: flex;
  }
}
</style>
