<template>
  <div>
    <div v-if="noticeList.length>0" style="display: flex;">
      <transition class="" name="slide" mode="out-in">
        <div style="display: flex;margin:0 auto;cursor: pointer;" @click="notice(count)">
          <img src="@/assets/profile/horn.png" alt style="width: 26px;height: 26px;margin-left: 11px;">
          <!-- <span style="font-size: 16px;font-weight: bold;color: #333333;line-height: 26px;">系统公告：</span> -->
          <span style="font-size: 16px;font-weight: bold;color: #333333;line-height: 26px;">{{ text?text[apiLang]:'' }}</span>
        </div>
      </transition>
    </div>
    <el-carousel height="450px">
      <el-carousel-item v-for="item in bannerUrlList" :key="item.id">
        <img :src="item.bannerUrlWeb" alt style="width: 1120px;height: 450px;margin-top: 24px;object-fit:fill" @click="banner(item.id)">
      </el-carousel-item>
    </el-carousel>
    <div v-if="sendOrderList.length>0">
      <div style="display: flex;margin-top: 28px;">
        <img src="@/assets/profile/order3.png" alt style="width: 28px;height: 28px;margin-left: 2px;">
        <span style="font-size: 22px;font-weight: bold;color: #333333;line-height: 28px;margin-left:9px">{{ $t('profile.myPost') }}</span>
      </div>
      <div style="margin-top: 16px;">
        <el-table
          :data="sendOrderList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.orderNo')"
            width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <router-link :to="{path: '/jiedao/jd-orderdetail',query: {orderId: scope.row.orderId}}" class="link-type">
                <span>{{ scope.row.orderNo }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('profile.transport')"
            width="150"
            align="center"
            header-align="center"
          >
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
            </template>
          </el-table-column>
          <el-table-column
            prop="marks"
            :label="$t('profile.marks')"
            width="100"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.status')"
            prop="statusMsg"
            align="center"
            header-align="center"
          >
            <!-- <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
            </template> -->
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('profile.createTime')"
            align="center"
            header-align="center"
          />
        </el-table>
      </div>
      <jd-button style="margin:16px auto;width: 200px;" :name="$t('profile.viewMorePost')" @click.native="postorder" />
    </div>
    <div v-if="receivedOrderList.length>0">
      <div style="display: flex;margin-top: 28px;">
        <img src="@/assets/profile/order3.png" alt style="width: 28px;height: 28px;margin-left: 2px;">
        <span style="font-size: 22px;font-weight: bold;color: #333333;line-height: 28px;margin-left:9px">{{ $t('profile.myReceivedo') }}</span>
      </div>
      <div style="margin-top: 16px;">
        <el-table
          :data="receivedOrderList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.orderNo')"
            width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <router-link :to="{path: '/jiedao/jd-orderdetail',query: {orderId: scope.row.orderId}}" class="link-type">
                <span>{{ scope.row.orderNo }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="transportId"
            :label="$t('profile.transport')"
            width="150"
            align="center"
            header-align="center"
          >
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
            </template>
          </el-table-column>
          <el-table-column
            prop="marks"
            :label="$t('profile.marks')"
            width="100"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.status')"
            prop="statusMsg"
            align="center"
            header-align="center"
          >
            <!-- <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
            </template> -->
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('profile.createTime')"
            align="center"
            header-align="center"
          />
        </el-table>
      </div>
      <jd-button style="margin:16px auto;width: 200px;" :name="$t('profile.viewMoreReceivedo')" @click.native="receivedorder" />
    </div>
    <div v-if="sendOrderList.length==0&&receivedOrderList.length==0" style="text-align: center;">
      <img src="@/assets/profile/none.png" alt style="width: 240px;height: 240px;">
    </div>
    <div v-if="sendOrderList.length==0&&receivedOrderList.length==0" style="text-align: center;">
      <span>{{ $t('profile.notOrder') }}</span>
    </div>
    <!-- 广告弹窗 -->
    <jd-dialog :show="bannerVisible&&bannerList.length>0" :button="$t('profile.know')" @showDialog="showDialog">
      <div>
        <div style="font-size: 24px;font-weight: bold;color: #333;text-align: center;">{{ dialogData['title'+bannerLang] }}</div>
        <div style="margin: 20px 50px;height: 150px;overflow: auto;" v-html="dialogData['htmlWeb'+bannerLang]">{{ dialogData['htmlWeb'+bannerLang] }}</div>
      </div>
    </jd-dialog>
    <!-- 密码修改提示弹窗 -->
    <el-dialog :title="$t('提示')" :visible.sync="noticeVisble" width="30%" top="30vh" center append-to-body :close-on-click-modal="false">
      <el-card>
        {{ $t('您的密码过于简单，请前往修改密码') }}
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="noticeVisble=false;$router.push('/jiedao/jd-setting');">{{ $t('修改密码') }}</el-button>
        <el-button @click="noticeVisble=false;bannerVisible=true">{{ $t('知道了') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JdButton from '@/components/JdButton'
import JdDialog from '@/components/JdDialog'
import DictTag from '@/components/DictTag'
import { getBannerList, getBannerUrlList, getNoticeList } from '@/api/message'
import { getIssued, getReceived } from '@/api/order'
import { getDialog, setDialog } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'Profile',
  components: {
    JdButton,
    JdDialog,
    DictTag
  },
  data() {
    return {
      bannerVisible: false,
      noticeVisble: false,
      bannerList: [],
      noticeList: [],
      count: 0, // 当前索引
      urlCount: 0, // 当前索引
      intervalId: null, // 定时器ID
      playTime: 3000, // 定时器执行间隔
      dialogData: {},
      bannerUrlList: [],
      sendOrderList: [],
      receivedOrderList: [],
      condition: {
        page: 1,
        rows: 3,
        creator: null
      },
      apiLang: '',
      bannerLang: '',
      langData: { zh_CN: 'title', en_US: 'titleEn' },
      bannerData: { zh_CN: 'Zh', en_US: 'En' }
    }
  },
  computed: {
    ...mapGetters(['loginUser']),
    text() {
      return this.noticeList[this.count]
    },
    language: {
      get() {
        return this.$store.getters.language
      },
      set(val) {
        this.$i18n.locale = val
        this.$store.dispatch('app/setLanguage', val)
      }
    }
  },
  watch: {
    language() {
      this.apiLang = this.langData[this.language]
      this.bannerLang = this.bannerData[this.language]
    }
  },
  created() {
    this.apiLang = this.langData[this.language]
    this.bannerLang = this.bannerData[this.language]
    // this.condition.creator = this.loginUser.id
    this.noticeVisble = this.loginUser.isSimplePassword && !getDialog()
    getBannerList({ page: 1, rows: 10 }).then(r => {
      this.bannerList = r.data.list
      var show = getDialog()
      if (this.bannerList.length > 0 && !show) {
        this.dialogData = this.bannerList[0]
        if (!this.noticeVisble) {
          this.bannerVisible = true
        }
      }
    })
    getBannerUrlList({ page: 1, rows: 10 }).then(r => {
      this.bannerUrlList = r.data.list
    })
    getNoticeList({ page: 1, rows: 100 }).then(r => {
      this.noticeList = r.data.list
    })
    getIssued().then((r) => {
      this.sendOrderList = r.data.list.slice(0, 3)
    })
    getReceived(this.condition).then((r) => {
      this.receivedOrderList = r.data.list
    })
    this.intervalId = setInterval(() => { // 定义定时器
      this.getText()
    }, this.playTime)
  },
  destroyed() {
    clearInterval(this.intervalId) // 清除定时器
  },
  methods: {
    notice(val) {
      var id = this.noticeList[val].id
      this.$router.push('/jiedao/jd-notice/jd-noticedetail?id=' + id)
    },
    banner(id) {
      this.$router.push('/jiedao/jd-bannerdetail?id=' + id)
    },
    getText() {
      const len = this.noticeList.length // 获取数组长度
      if (len === 0) {
        return // 当数组为空时，直接返回
      }
      if (this.count === len - 1) { // 当前为最后一个时
        this.count = 0 // 从第一个开始
      } else {
        this.count++ // 自增
      }
    },
    receivedorder() {
      this.$router.push('/jiedao/jd-receivedorder')
    },
    postorder() {
      this.$router.push('/jiedao/jd-postorder')
    },
    showDialog() {
      this.bannerVisible = false
      setDialog()
    }
  }
}
</script>

<style scoped>
::v-deep .el-table__header .el-table__cell{
  background-color: #27417C;
  font-size: 13px;
  height: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
}
</style>
