<template>
  <div style="margin-left:30px">
    <el-row>
      <el-form :model="oilSitePriceAdjustTask" label-width="100px" :size="$store.getters.size">
        <el-row>

          <el-row>
            <el-col :span="14">

              <el-row>
                <el-col :span="10">
                  <el-form-item label="任务名称" prop="adjustTaskName">
                    <el-input v-model="oilSitePriceAdjustTask.adjustTaskName" :disabled="true" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item
                    label="油站渠道"
                    prop="siteChannel"
                  >
                    <el-select v-model="oilSitePriceAdjustTask.channelCode" disabled clearable @change="getSiteNum()">
                      <el-option
                        v-for="item in siteChannelArray"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select></el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="10">
                  <el-form-item
                    label="油品类型"
                    prop="oilProductCode"
                  >
                    <el-select v-model="oilSitePriceAdjustTask.oilProductCode" disabled @change="getSiteNum()">
                      <el-option
                        v-for="item in oilTypeArry"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col />
              </el-row>

            </el-col>

            <el-col :span="10">B</el-col>
          </el-row>
          <el-row>
            <div>
              <div slot="table">
                <!--这里放表格和分页-->
                <!-- 列表开始 -->
                <el-table
                  :max-height="tableHeight"
                  :data="dataPage.list"
                  fit
                  style="width: 100%"
                  :size="$store.getters.size"
                  @row-click="openSiteInfo"
                  @sort-change="sortHandler"
                  @selection-change="handleSelectionChange"
                >
                  <!-- <el-table-column
                    type="selection"
                    width="75"
                  /> -->
                  <!-- <el-table-column
                    label="序号"
                    type="index"
                    :index="indexMethod"
                  /> -->
                  <template v-for="(item, index) in tableColumns" @change="$forceUpdate()">
                    <el-table-column
                      v-if="item.show"
                      :key="index"
                      :fixed="item.fixed"
                      :align="item.align"
                      :show-overflow-tooltip="true"
                      :min-width="item.minWidth"
                      :width="item.width"
                      :prop="item.prop"
                      :sortable="item.sortable"
                      :label="item.label"
                      :formatter="item.render"
                      @change="$forceUpdate()"
                    />
                  </template>
                  <!-- fixed="right" -->

                </el-table>
              </div>
            </div>
          </el-row>
          <hr style="margin-top:40px">
          <label> 油站详细信息</label>
          <div v-show="querySiteInfo" style="border-color:#FAFAFA;border-style:solid;margin-top:15px">

            <el-row style="margin-top:25px">
              <el-col :span="7" style="margin-left:10px">
                <label>油站名称:</label>{{ oilSite.siteName }}

              </el-col>
              <el-col :span="7">
                <label>油站编号:</label>{{ oilSite.siteCode }}

              </el-col>
              <el-col :span="7">
                <label>油站地址:</label>{{ oilSite.address }}

              </el-col>
            </el-row>
            <el-row style="margin-top:25px">
              <el-col :span="7" style="margin-left:10px">
                <label>渠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;道:</label>{{ oilSite.siteChannelName }}

              </el-col>
              <el-col :span="7">
                <label>油&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品:</label>{{ oilSite.oilProductCode }}

              </el-col>
              <el-col :span="7" />
            </el-row>
            <el-row style="margin-top:25px">
              <el-col :span="7" style="margin-left:10px">
                <label>联&nbsp;系&nbsp;人:</label>{{ oilSite.siteContacts }}

              </el-col>
              <el-col :span="7">
                <label>联系电话:</label>{{ oilSite.siteContactPhone }}

              </el-col>
              <el-col :span="7" />
            </el-row>
          </div>
          <hr style="margin-top:40px">

          <div style="border-color:#FAFAFA;border-style:solid;margin-top:15px">
            <el-row style="margin-top:25px">

              <el-col>
                <el-form-item label="生效方式">
                  <el-radio-group style="width: 100%;display: flex;align-items: center;box-shadow: none !important;" v-model="effectiveMode" @change="dateChange">
                    <el-col>
                      <el-radio label="0">立刻生效</el-radio>
                    </el-col>
                    <el-col>
                      <el-radio label="1">预约时间&nbsp;&nbsp;&nbsp;
                        <el-date-picker
                          v-model="subEntryTime"
                          :disabled="effectiveMode === '0'"
                          type="datetime"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间"
                        /></el-radio>
                    </el-col>
                  </el-radio-group>
                </el-form-item>
              </el-col>

            </el-row>

          </div>

          <el-col :span="24" style="text-align: center">
            <el-button
              type="success"
              @click="submit"
            >审核通过</el-button>
            <el-button
              type="info"
              @click="submitLinShi"
            >审核不通过</el-button>
            <el-button
              type="warning"
              @click="cancel"
            >取消执行</el-button>
            <el-button @click="close">取消</el-button>

          </el-col>
        </el-row></el-form>
    </el-row>
  </div>
</template>
<script>
import oilSitePriceAdjustTaskApi from '@/api/user/oilSitePriceAdjustTask'
import oilSiteInfoApi from '@/api/user/oilSiteInfo'
export default {
  props: {
    oilSitePriceAdjustTask: {
      type: Object,
      default() {

      }
    }
  },
  data() {
    return {
      newenterprisePrice: '',
      newpersonalPrice: '',
      newsitePrice: '',
      newmarketPrice: '',
      newsettlementPrice: '',
      tableHeight: null,
      loading: false,
      channelIds: [],
      querySiteInfo: false,
      timeUse: false,
      newValue: [],
      oilSite: {},
      effectiveMode: '0',
      subEntryTime: '',
      oilSiteChannelVo: {},
      multipleSelection: [], // 选择表格数据集合
      multipleSelectionChannel: [], // 选中列的渠道Id
      options: [

      ],
      siteChannelArray: [
        { value: 'XOIL', label: '星油' },
        { value: 'WJY', label: '万金油' },
        { value: 'LV', label: '老吕（找油网）' },
        { value: 'TY', label: '团油' },
        { value: 'YDJY', label: '一点加油（壳牌）' }

      ],
      options11: [{ value: 'IMSITE', label: '综合' },
        { value: 'XOIL', label: '星油' },
        { value: 'WJY', label: '万金油' },
        { value: 'LV', label: '老吕（找油网）' },
        { value: 'TY', label: '团油' },
        { value: 'YDJY', label: '一点加油（壳牌）' }

      ],

      oilTypeArry: [
        { value: '90#', label: '90#' },
        { value: '95#', label: '95#' }

      ],
      value: [],
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      dataPage: { // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: { // 查询参数
        },
        sorted: {},
        list: []

      },
      commitList: [],
      tableColumns: [
        { prop: 'siteName', label: '油站名称', show: true, render: (row, column, cell) => {
            return cell
          } },
                  { prop: 'marketPrice', label: '发改委价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.marketPrice < row.newmarketPrice){
              className = "el-icon-top font-red"
            }else if (row.marketPrice > row.newmarketPrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col>
                  <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newmarketPrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>

            </div>
          } },
                  { prop: 'sitePrice', label: '油站价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.sitePrice < row.newsitePrice){
              className = "el-icon-top font-red"
            }else if (row.sitePrice > row.newsitePrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col>
                  <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newsitePrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>

            </div>
          } },
        { prop: 'otherPrice', label: '三方渠道价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.otherPrice < row.newOtherPrice){
              className = "el-icon-top font-red"
            }else if (row.otherPrice > row.newOtherPrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col>
                  <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newOtherPrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>
            </div>
          } },
                  { prop: 'enterprisePrice', label: '企业价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.enterprisePrice < row.newenterprisePrice){
              className = "el-icon-top font-red"
            }else if (row.enterprisePrice > row.newenterprisePrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col>
                  <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newenterprisePrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>

            </div>
          } },

                  { prop: 'personalPrice',  label: '个人价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.personalPrice < row.newpersonalPrice){
              className = "el-icon-top font-red"
            }else if (row.personalPrice > row.newpersonalPrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col >
                  <el-input style='width:80px;height:40px;margin-left:-10px' disabled v-model={row.newpersonalPrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>
            </div>
          } },
                  { prop: 'settlementPrice', label: '结算价格（元/L）', show: true, render: (row, column, cell) => {
            let className = ''
            if (row.settlementPrice < row.newsettlementPrice){
              className = "el-icon-top font-red"
            }else if (row.settlementPrice > row.newsettlementPrice){
              className = "el-icon-bottom font-green"
            }
            return <div>
              <div style='margin-left:10px'>{cell}</div>
              <el-row>
                <el-col>
                  <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newsettlementPrice} ></el-input>
                  <span class="pl-5"> <i class={className}></i></span>
                </el-col>
              </el-row>

            </div>
          } },
          { prop: 'floorPrice', label: '底价（元/L）', show: true, render: (row, column, cell) => {
          let className = ''
          if(!cell){
            cell=0
          }
            if (row.floorPrice < row.newfloorPrice){
              className = "el-icon-top font-red"
            }else if (row.floorPrice > row.newfloorPrice){
              className = "el-icon-bottom font-green"
            }
          return <div>
            <div style='margin-left:10px'>{cell}</div>
            <el-row>
              <el-col>
                <el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newfloorPrice} ></el-input>
                <span class="pl-5"> <i class={className}></i></span>
              </el-col>
            </el-row>
          </div>
        } },
            { prop: 'floorRemark', label: '底价说明', show: true, render: (row, column, cell) => {
          let className = ''
         
          return <div>
        
            <el-row>
              <el-col>
                <el-input  type="textarea" style='width:130px;height:60px;margin-left:-9px' disabled v-model={row.floorRemark} ></el-input>
                <span class="pl-5"> <i class={className}></i></span>
              </el-col>
            </el-row>
          </div>
        } },





      ],
      siteNumber: 0
    }
  },
  created() {
    this.channelIds = []
    this.effectiveMode = this.oilSitePriceAdjustTask.effectiveMode + ''
    this.subEntryTime = this.oilSitePriceAdjustTask.subEntryTime
    this.dataPage.list = this.oilSitePriceAdjustTask.details
    for (let i = 0; i < this.dataPage.list.length; i++) {
      this.channelIds.push(this.dataPage.list[i].channelId)
    }

    this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode
    this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode
    oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCodeCount(this.oilSiteChannelVo).then(res => {
      if (res.data) {
        this.siteNumber = res.data.count
      }
    })
  },
  methods: {
    submit() {
      this.oilSitePriceAdjustTask.taskStatus = 1
      this.verify(this.oilSitePriceAdjustTask)
    },
    submitLinShi() {
      this.oilSitePriceAdjustTask.taskStatus = 2
      this.verify(this.oilSitePriceAdjustTask)
    },
    verify() {
      oilSitePriceAdjustTaskApi.verify(this.oilSitePriceAdjustTask).then(res => {
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    cancel() {
      oilSitePriceAdjustTaskApi.cancel(this.oilSitePriceAdjustTask.id).then(res => {
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    getSiteNum() {
      this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode
      this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode
      if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode) {
        oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCodeCount(this.oilSiteChannelVo).then(res => {
          if (res.data) {
            this.siteNumber = res.data.count
          }
        })
      }
    },
    getChannelPrice() {
      this.oilSiteChannelVo.ids = this.channelIds
      this.oilSiteChannelVo.oilProductCode = this.oilSitePriceAdjustTask.oilProductCode

      this.querySiteInfo = false
      if (this.oilSiteChannelVo.ids.length < 1) {
        this.dataPage.list = []
        this.querySiteInfo = false
        return
      }

      if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode &&
      (this.oilSiteChannelVo.ids && this.oilSiteChannelVo.ids.length > 0)) {
        oilSitePriceAdjustTaskApi.getChannelPriceByChannelIds(this.oilSiteChannelVo).then(res => {
          this.dataPage.list = res.data
        })
      }
    },
    sortHandler(column) {
      // 排序查询
      const key = column.prop
      const value = column.order
      this.page.sorted = {}
      this.page.sorted[key] = value
      this.getByPage()
    },
    handleSelectionChange(val) { // 选择表格数据
      this.multipleSelectionChannel = []
      this.multipleSelection = val
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.multipleSelectionChannel.push(this.multipleSelection[i].channelId)
      }
    },
    indexMethod(index) {
      return (index + 1) * 1
    },
    openSiteInfo(row) {
      if (row) {
        oilSiteInfoApi.get(row.siteId).then(res => {
          this.oilSite = res.data
          this.oilSite.oilProductCode = row.oilProductCode
          this.oilSite.siteChannelName = this.channelName(this.oilSite.siteChannel)
          this.querySiteInfo = true
        })
      }
    },
    channelName(channelCode) {
      for (let u = 0; u < this.options11.length; u++) {
        if (this.options11[u].value === channelCode) {
          return this.options11[u].label
        }
      }
    },
    removeItem(row) {
      this.querySiteInfo = false
      for (let u = 0; u < this.channelIds.length; u++) {
        if (this.channelIds[u] === row.channelId) {
          this.channelIds.splice(u, 1)
          u = u - 1
        }
      }
      for (let u = 0; u < this.dataPage.list.length; u++) {
        if (row.channelId === this.dataPage.list[u].channelId) {
          this.dataPage.list.splice(u, 1)
          u = u - 1
        }
      }
      this.querySiteInfo = false
      return
    },
    reset(row) {
      row.siteName = row.siteName + ' '
      row.newpersonalPrice = ''
      row.newenterprisePrice = ''
      row.newsitePrice = ''
      row.newmarketPrice = ''
      row.newsettlementPrice = ''
    },
    remoteMethod(query) {
      if (query !== '') {
        this.options = []
        this.loading = true
        this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode
        this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode
        this.oilSiteChannelVo.siteName = query
        if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode) {
          oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCode(this.oilSiteChannelVo).then(res => {
            this.options = res.data
          })
        }
      } else {
        this.options = []
      }
      this.loading = false
    },
    addChanmelItem() {
      if (!this.oilSitePriceAdjustTask.channelId) {
        return
      }
      for (let i = 0; i < this.channelIds.length; i++) {
        if (this.channelIds[i] === this.oilSitePriceAdjustTask.channelId) {
          this.$message.warning('该油站已添加至调价列表')
          return
        }
      }
      this.channelIds.push(this.oilSitePriceAdjustTask.channelId)
      //  this.getChannelPrice()
      this.oilSiteChannelVo.ids = []
      this.oilSiteChannelVo.ids[0] = this.oilSitePriceAdjustTask.channelId
      oilSitePriceAdjustTaskApi.getChannelPriceByChannelIds(this.oilSiteChannelVo).then(res => {
        var obj = res.data[0]
        this.dataPage.list.push(obj)
      })
    },
    checkItem() {
      if (this.oilSitePriceAdjustTask.effectiveMode === '1') {
        this.timeUse = false
      } else {
        this.oilSitePriceAdjustTask.subEntryTime = ''
        this.timeUse = true
      }
    },
    batchModify() {
      if (this.multipleSelectionChannel.length < 1) {
        this.$message.warning('未选择调价渠道')
        return
      }
      for (let j = 0; j < this.multipleSelectionChannel.length; j++) {
        for (let i = 0; i < this.dataPage.list.length; i++) {
          if (this.multipleSelectionChannel[j] === this.dataPage.list[i].channelId) {
            this.$set(this.dataPage.list[i], 'newpersonalPrice', this.newpersonalPrice)
            this.$set(this.dataPage.list[i], 'newenterprisePrice', this.newenterprisePrice)
            this.$set(this.dataPage.list[i], 'newsitePrice', this.newsitePrice)
            this.$set(this.dataPage.list[i], 'newmarketPrice', this.newmarketPrice)
            this.$set(this.dataPage.list[i], 'newsettlementPrice', this.newsettlementPrice)
          }
        }
      }
    },
    dateChange() {
      if (this.effectiveMode === '0') {
        this.subEntryTime = ''
      }
    },

    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
