<template>
  <view class="mp-u-modal">
    <u-modal :mask-close-able="true" :show="showModal" closeOnClickOverlay :showConfirmButton="false" @close="$emit('hideModal')" z-index="99999">
      <view class="w-100 modal-content">
        <view style="max-height:560rpx;overflow-y: scroll;">
          <view class="header-title">命令下发</view>
          <view class="u-flex">
            <text class="type-text">下发类型:</text>
            <u-radio-group v-model="commandType" placement="row" @change="handleCommand">
              <u-radio :customStyle="{marginRight: '20rpx'}" v-for="item in commandTypeList" activeColor="#3388FF" :label="item.label" :name="item.value" :key="item.value"></u-radio>
            </u-radio-group>
          </view>
          <view class="u-flex" style="margin-top: 28rpx" v-if="commandType == 0">
            <text class="type-text">单向/双向:</text>
            <u-radio-group v-model="callType" placement="row">
              <u-radio activeColor="#3388FF" label="单向" name="OneWay"></u-radio>
              <view style="margin: 0 20rpx"></view>
              <u-radio activeColor="#3388FF" label="双向" name="TwoWay"></u-radio>
            </u-radio-group>
          </view>
          <view class="u-flex" style="margin-top: 28rpx" v-else>
            <text class="type-text">服务:</text>
            <view @click="openService">
              <u-input shape="circle" v-model="serviceName" placeholder="请选择服务" disabled disabledColor="#fff" suffixIcon="arrow-down" />
            </view>
          </view>
          <view class="u-flex" style="margin-top: 28rpx; flex-direction: column; align-items: flex-start" v-if="isShowServiceFunctionName && commandType == 1">
            <text class="type-text">输入参数:</text>
            <seriesForm ref="seriesFormRef" :seriesInputData="seriesInputData" :isTCPTransport="isTCPTransport"></seriesForm>
          </view>
          <view class="content-body" v-if="commandType == 0">
            <div class="u-flex u-row-between">
              <u--textarea :placeholder="`请输入下发内容${isShowTCP ? '(字符串格式)' : '(json格式)'}`" v-model="inputCommandVal" />
              <u-icon v-if="!isShowTCP" @click="handleCopy(copyTextValue)" name="question-circle" color="#2979ff" size="28" class="ml-10"> </u-icon>
            </div>
          </view>
        </view>
        <view class="button-group">
          <view>
            <u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消" @click="cancelCommand"></u-button>
          </view>
          <view>
            <u-button color="#3388ff" shape="circle" text="确认" @click="confirmCommand"></u-button>
          </view>
        </view>
      </view>
      <u-picker
        :show="isShowService"
        :columns="[seriesList.map((item) => ({ label: item.functionName, value: item.identifier,callType:item.callType }))]"
        keyName="label"
        closeOnClickOverlay
        @cancel="cancelTypeGap"
        @close="cancelTypeGap"
        @confirm="handleSelect"
      ></u-picker>
    </u-modal>
  </view>
</template>

<script>
import { useShowModal } from '@/plugins/utils.js'
import seriesForm from './seriesForm.vue'

import api from '@/api/index.js'

export default {
  components: {
    seriesForm,
  },
  props: {
    showModal: Boolean,
    isShowTCP: Boolean,
    deviceDetail: Object,
  },
  data() {
    return {
      current: 0,
      commandType: 0, //下发类型
      callType: 'OneWay', //单双向
      serviceName: '', //服务
      service: null, //服务
      inputCommandVal: '',//自定义命令
      isShowService: false, //服务下拉框
      isShowServiceFunctionName: false, //选择服务过后的输入参数
      copyTextValue: {
        method: 'methodThingskit',
        params: {
          pin: 7,
          value: 1,
        },
      },
      commandTypeList: [{ label: '自定义', value: 0 }],
      seriesList: [], //服务下拉框的数据
      boolList: [],
      enumList: [],
      seriesInputData: [],
      isTCPTransport:false
    }
  },
  mounted() {
    this.getFormInfo()
  },
  watch: {
    showModal: {
      deep: true,
      handler() {
        this.commandType = 0
        this.serviceName = ''
        this.isShowServiceFunctionName = false
      },
    },
  },
  methods: {
    cancelCommand() {
      this.commandType = 0
      this.$emit('cancelCommand')
    },
    async confirmCommand() {
			if(this.commandType==0){
				this.$emit('confirmCommand',this.commandType, this.callType, this.inputCommandVal)
			}else{
			  const result = this.$refs.seriesFormRef.handleValidate()
				if(!result){
					return
				}
				const value = this.$refs.seriesFormRef.getFormField()
				const values =this.isTCPTransport?value.serviceCommand: {
					[this.service]:value
				}
				this.$emit('confirmCommand',this.commandType, this.callType, values)
			}
    },
    handleCopy(value) {
      useShowModal(JSON.stringify(value), '命令下发', '复制内容').then((res) => {
        uni.setClipboardData({
          data: JSON.stringify(value),
          success: () => {
            uni.showToast({
              title: '复制成功',
            })
          },
        })
      })
    },

    async getFormInfo() {
      const { transportType, deviceType, deviceProfile } = this.deviceDetail || {}
      const {
        profileData: {
          transportConfiguration: { protocol },
        },
      } = deviceProfile || {}
      this.isTCPTransport = transportType === 'TCP'
      const isTCPModbus = this.isTCPTransport && protocol === 'MODBUS_RTU'
      if (isTCPModbus || (this.isTCPTransport && deviceType === 'SENSOR')) {
        this.commandTypeList = this.commandTypeList.length==2?this.commandTypeList.pop():this.commandTypeList
      } else {
        this.commandTypeList.push({ label: '服务', value: 1 })
        this.seriesList = await api.deviceApi.getModelServices(this.deviceDetail)
      }
    },

    openService() {
      this.isShowService = true
    },
    handleSelect(e) {
      this.isShowService = false
      const { value } = e || {}
      this.serviceName = value[0].label
      this.service = value[0].value
      if (this.service) {
        this.isShowServiceFunctionName = true
        const { functionJson } = this.seriesList.filter((item) => item.identifier === this.service)[0] || {}
        const { inputData } = functionJson || {}
        this.seriesInputData = inputData || []
				this.callType = value[0].callType==='ASYNC'?'OneWay':'TwoWay'
      }
    },

    cancelModel() {
      this.isShowService = false
      this.seriesInputData = []
      this.seriesList = []
    },

    handleCommand(name){
      this.seriesInputData = []
      this.serviceName = ''
      this.isShowServiceFunctionName = false
			if(this.commandType==0){
				this.callType = 'OneWay'
			}
    },

    cancelTypeGap() {
      this.isShowService = false
    },

    reset() {
      this.callType = 'OneWay'
      this.inputCommandVal = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.modal-content {
  width: 720rpx;
  padding: 0 30rpx;
  background-color: white;

  .header-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 40rpx;
  }

  .type-text {
    color: #333;
    font-size: 14px;
    font-weight: 700;
    margin-right: 30rpx;
  }

  .content-body {
    margin-top: 28rpx;
    width: 100%;
  }

  .button-group {
    display: flex;
    margin-top: 40rpx;
    justify-content: space-between;

    view {
      width: 300rpx;
    }
  }
}
</style>